my jqgrid doesnt seem to reload.. can anyone help me with this?..
$(function(){
$last_name = $("#search_last_name").val();
$first_name = $("#search_first_name").val();
});
$("#search").click(function(){
jQuery("#list2").jqGrid('setGridParam',{url:"http://localhost/bcb/index.php/bcb_c/grid"});
jQuery("#list2").trigger("reloadGrid");
});
$("#list2").jqGrid({
url:'http://localhost/bcb/index.php/bcb_c/grid',
datatype: "json",
colNames:['id','First Name','Middle Name', 'Last Name', 'Address'],
colModel:[
{name: 'id', index:'id', width:20},
{name:'first_name',index:'first_name', width:120},
{name:'middle_name',index:'middle_name', width:120},
{name:'last_name',index:'last_name', width:120},
{name:'address', index:'address', width:120}
],
rowNum:10,
rowList:[10,20,30],
loadonce: true,
postData: {pass1: $last_name, pass2: $first_name},
pager: jQuery('#pager2'),
width: '550',
imgpath: gridimgpath,
scrollrows: true,
viewrecords: true,
sortorder: "desc"
});
You should use
pager: '#pager2',
and
loadonce: false,
Hope this helps you.
Related
I have this in callendar but I want to know how to make the second activity in the same hour overlap. I tried overlap: false and eventOverlap: false but none of them work.
This is the code I have
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaFourDay'
},
editable: true,
droppable: true,
defaultView: "agendaWeek",
firstDay: 1,
allDaySlot: false,
minTime: "08:00",
maxTime: "24:00",
timeFormat: 'H:mm',
eventOverlap: true,
slotLabelFormat: 'H:mm',
slotEventOverlap: true,
events: [
//event data
],
});
});
eventOverlap should work when dragging or resizing - but you are using false, which will not allow events to overlap. You say you want to allow them to overlap, so you should be using true.
You can use slotEventOverlap for initial rendering of agenda events - again, use true, not false, to allow them to overlap.
Hi guys I have a dojo datagrid inside a TabContainer/BorderContainer/ContentPane
The datagrid is render progammatically, the code is:
<script>
require(['dojo/request',
'dojo/dom',
'dijit/Dialog',
'dojo/date/locale',
'dojo/_base/array',
'dojo/store/Memory',
'dojo/data/ObjectStore',
"dijit/form/Button",
"dojo/dom-class",
'dojox/grid/DataGrid',
'dijit/form/Select',
'dojox/form/Uploader',
'dojo/data/ItemFileWriteStore',
'dojo/_base/xhr',
'dojox/grid/cells/dijit',
'dojox/grid/cells',
'dojo/date',
'dojo/date/stamp',
'dojo/date/locale',
'dojo/currency',
'dijit/form/DateTextBox',
'dijit/form/CurrencyTextBox',
"dojox/grid/_RadioSelector",
'dojo/ready',
'dojo/domReady!'],
function(request,dom,Dialog,locale,array,Memory, ObjectStore,Button,domClass,DataGrid, ItemFileWriteStore, xhr,cells,cellsDijit,date,stamp, locale,currency,localeCurrency, DateTextBox, CurrencyTextBox,ready){
var dataStore1 = new ObjectStore({ objectStore:new Memory({ data: <?php echo json_encode($constructiondrawingsdata) ?> }) });
var layout1 = [{
defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: center;' },
cells: [
{name: 'TYPE', field: 'filepath' ,formatter: displayIcon ,width:3},
{name: 'ID', field: 'id' ,width:2},
{name: 'PROJECT', field: 'project' ,width:5},
{name: 'USER', field: 'user' ,width:8},
{name: 'GROUP', field: 'area' ,width:5},
{name: 'DESCRIPTION', field: 'description' ,width:15},
{name: 'FILE', field: 'filepath' ,formatter: formatlink ,width:20},
{name: 'SIZE', field: 'size' ,width:8},
{name: 'DATE', field: 'date' ,width:8},
{name: 'STATE', field: 'status' ,formatter: formatcolumcolor ,width:18},
{name: 'REMARKS', field: 'remarks' ,width:15}
]
}];
var grid1 = new DataGrid({
id: 'grid1',
query: { id: "*" },
store: dataStore1,
structure: layout1,
loadingMessage: "Loading data...",
noDataMessage : "No results found",
clientSort: 'false',
style: "height: 100%; width: 100%",
canSort: function(col) { return col != 1; },
selectionMode:'single',
rowSelector: '0px'});
grid1.placeAt("gridDiv1");
</script>
<div data-dojo-type="dijit/layout/BorderContainer" style="padding:0px" data-dojo-props="liveSplitters: true, design: 'headline'">
<div id="gridDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
The problem is , when I load the datagrid the first time I only get 7 rows from the database of a total of 9 rows, and then when I refresh the datagrid I get the 9 rows.
Moreover if I press F12 in Google Chrome to see the console and I close it I lose again the last 2 rows of the datagrid (it´s weird right?).
Again if I refresh the datagrid I get the 9 rows.
Anyone has faced this issue?. Thanks in advance
Hi I am using the datatable to display some data in our website but some reason I am not able to fix the column width to a fixed size, its calculating column width automatically.
I have tried specifying the {"sWidth": "30px;"} for the columns but no luck.
Here I am giving my code which renders the table
jQuery('#dynamic')
.html('<table cellpadding="1" cellspacing="1" border="0" class="properties" id="settingsGrid"></table>');
jQuery('#settingsGrid').dataTable({
// "bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": aDataSet,
"aoColumns": [
{"sTitle":"catId", "bVisible": false},
{"sTitle" : "Name","sWidth": "30px;"},
{"sTitle" : "Email","sWidth": "30px;"},
{"sTitle" : "Phone no","sWidth": "30px;"},
{"sTitle" : "Location","sWidth": "30px;"},
{"sTitle" : "No of Properties","sWidth": "30px;"},
{"sTitle" : "Web Site URL","sWidth": "30px;"},
{"sTitle" : "Created Date","sWidth": "30px;"}
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mRender": function ( data, type, row ) {
return data +' '+ row[3];
}
}
],
"bAutoWidth": false,
"bDeferRender": true,
"sScrollY": "350",
"bScrollCollapse": true,
"bFilter" : false,
"bSort" : false,
"bInfo" : false,
"bLengthChange": false,
"iDisplayLength": 10,
"oLanguage": {
"sEmptyTable": "No categories available in your name"
},
"oLanguage": {
"sInfoEmpty": "No entries to show"
},
});
Can anyone guide me where I am going wrong?
Here is a output what I am getting, basically I need to shrink the website column.
Try this piece of code in css:
#settingsGrid td {
width: 30px !important;
}
my jgGrid appears correctly, but the icons on the Navigator button are not appearing. There is an outline to the buttons and a tooltip when you hover over them, but no icon on the button, like a "+" or trash bin.
Also, is there a way to hide certain buttons and not others, like remove the add record butoon, but leave the delete record button.
I have followed the instructions relating to the style sheets and language files.
Below is the code that creates a grid:
// create the grid
$(gridName).jqGrid({
// server url and other ajax stuff
url: '/Admin/Blogs',
datatype: 'json',
mtype: 'GET',
height: 'auto',
shrinkToFit: false,
// columns
colNames: colNames,
colModel: columns,
// pagination options
toppager: false,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
// row number column
rownumbers: true,
rownumWidth: 40,
// default sorting
sortname: 'PostedOn',
sortorder: 'desc',
// display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false }
});
$(gridName).navGrid(pagerName,
{
// settings
cloneToTop: true,
search: false
},
{}, // add options
{}, // edit options
{} // delete options
);
Make sure your page got jquery-ui.js and jquery.ui.theme.css with icons images in your css/images folger.
About hiding some buttons:
$(gridName).navGrid(pagerName,
{edit:false,search:false,del:true,add:true,view:false,refresh:false,cloneToTop: true},
// navigator options ( where true = show / false = hide )
{}, // add options
{}, // edit options
{} // delete options
);
if you will add custom buttons, just give them id and hide :
$('#buttonId').hide();
By adding jquery.ui.theme.css with the theme images folder everything worked.
Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the following working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:
function fmt_group_heading(groupVal) {
if (groupVal === 'Y') {
return 'Past';
} else {
return 'Upcoming';
}
}
// create the Grid
var fitGrid = new Ext.grid.GridPanel({
store: fitGroupingStore,
columns: [
{header: "ID", dataIndex: 'id', hidden: true },
{header: 'Event', width:320, dataIndex: 'event',
renderer:fmt_event_description},
{header: 'Events', dataIndex: 'completed', hidden: true,
renderer: fmt_group_heading }
],
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
groupRenderer: 'completed',
forceFit: true
})
});
ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.
this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {completed}'
});
// create the Grid
this.fitnessGrid = new Ext.grid.Panel({
store: this.fitnessEventStore,
features: [this.groupingFeature],
// etc.......
try smth like this:
groupHeaderTpl:
'{[fmt_group_heading(values.name)]}
({rows.length}
Item{[values.rows.length > 1 ? "s" :
""]})'
The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.
See the Docs.
Try this:
groupHeaderTpl: '{[values.rows[0].completed]}'