jqGrid grouping feature disappear when run addRowData - jqgrid

The jqGrid's website has following code example about how to use grouping feature, it works very well.
$(document).ready(function(){
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
....
];
$("#list48").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#plist48",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name'],
groupDataSorted:false,
groupColumnShow:[true]
},
caption: "Grouping Array Data"
});
But if I remove:
data: mydata,
And compose the grid by using addRowData:
$('#list48').addRowData("id", mydata);
The grouping disappeared, anybody experience similar issue ? Could you please help?
Thanks!

Try calling sortGrid after addRowData. That worked for me. Syntax for sortGrid is at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
var sortByColumnKey = 'StartDate';
$('#grid').jqGrid('sortGrid', sortByColumnKey, true);

I too had the same issue. Just triggering 'reloadGrid' solved it for me.
$('#grid').trigger('reloadGrid');

Grouping is not taken after adding rows on $('#list48').addRowData("id", mydata);
You should re-group with new data added in grid. Try this after adding rows to grid.
$('#list48').jqGrid('groupingGroupBy', 'name', {
groupDataSorted:false,
groupColumnShow:[true]
});

Related

JQGrid - How can i reload the dataurl of one select based on another select

I have a JQgrid, i click to add a row and editform opens.
In the editform I have 2 select, loaded using php and mysql.
When I change the first select, i need to reload the 2nd select passing the new id.
I managed to make it work, but I lose bootstrap style and alignment.
Could anybody help me? Id would be fine like i did but I just want to reload the new dataurl, I don't want to lose the style and alignment.
thank you!
$("#gDett").jqGrid({
regional:lingua_attiva,
url:'include/dettagli/grid_esiti_sped.php?idquery=1',
datatype: "json",
mtype: 'GET',
colNames:['ID',
],
colModel :[
{name:'ID', index:'ID', width:80, sortable:false, hidden:true},
{name:'IdUtenteEsi', index:'IdUtenteEsi', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovautenti.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovautenti.php',
dataEvents: [
{type: 'change',
fn: function (e) {
$("#tr_TipoCella").load('include/dettagli/trovatipicella.php?IdUtente=' + e.target.value);
}
}
]
},
editrules:{required: true, edithidden: true}
},
{name:'TipoCella', index:'TipoCella', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovatipicella.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovatipicella.php',
postData: function (rowid) {
return {
action: "getState",
IdUtente: $(this).jqGrid("getCell", rowid, "IdUtenteEsi")
};
}
},
editrules:{required: true, edithidden: true}
}
],
editurl:'include/dettagli/grid_esiti_sped.php?idquery=2',
pager: '#pDett',
rowNum:100,
rowList:[10,20,30,50,100],
sortname: '',
sortorder: '',
viewrecords: true,
gridview: true,
caption: 'Service status',
autowidth:false,
shrinkToFit: false,
forceFit:false,
width:'860',
height:'200',
altRows: false,
hiddengrid:false,
hidegrid:false
});

JQgrid not working for local data

i am posting the data to cgi script and getting the response in json format. storing into the variable and trying to load it in the jqgrid. but Jqgrid not loading the local data even its showing table. here is the jquery script:
$(document).ready(function(){
$("#blastform").submit(function(){
$('#blast').hide();
$('#blastresults').show();
$("#datatable").show();
var thistarget = this.target;
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
dataType: 'html',
error: function() {
$(thistarget).html("<span class='error'>Failed to submit form!</span>");
},
success: function(res) {
// $('#blastresults').html(res);
}
})
return false;
var mydata=[res];
$("#datatable").jqGrid({
datatype:'local',
data: mydata,
jsonReader: {
repeatitems : false,
},
colNames:['QueryID','SubjectID', 'Identity', 'Align-len', 'Mismatches','Gaps','QStart','QEnd','Suject-start','Subject_end','E.Value','Score'],
colModel:[ {name:'query',index:'query', width:55},
{name:'subject',index:'subject', width:90},
{name:'Identity',index:'Identity', width:100},
{name:'AlignLen',index:'AlignLen', width:80, align:"right"},
{name:'Mismatches',index:'Mismatches', width:80, align:"right"},
{name:'Gaps',index:'Gaps', width:80,align:"right"},
{name:'Qstart',index:'Qstart', width:80,align:"right"},
{name:'Qend',index:'Qend', width:80,align:"right"},
{name:'Sstart',index:'Sstart', width:150, sortable:false},
{name:'Send',index:'Send', width:150, sortable:false},
{name:'Evalue',index:'Evalue', width:10, sortable:false},
{name:'Score',index:'Score', width:10, sortable:false}, ],
rowNum:5,
rowList:[2,3,5,10],
pager: $('#pager2'),
sortname: 'QueryID',
//imgpath: '/var/www/test/images',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
height: '500px',
width:'1000px',
altRows: true,
pgbuttons: true,
caption: 'Blast Results'
});
$("#datatable").jqGrid('navGrid','#pager2', {position: 'right'});
jQuery("#datatable").jqGrid('navGrid','#blastresults',{edit:false,add:false,del:false});
}
);
});
the response from the Ajax call is:
[ {"Mismatches":"6","subject":"Ca7","query":"AB-Contig743","Send":"17305359","Gaps":"1","AlignLen":"1119","Score":"2113","Identity":"99.37","Evalue":"0.0","Sstart":"17304241","Qstart":"33","Qend":"1150"}, {"Mismatches":"1","subject":"Ca7","query":"AB-Contig743","Send":"41349183","Gaps":"0","AlignLen":"26","Score":"44.1","Identity":"96.15","Evalue":"0.032","Sstart":"41349208","Qstart":"614","Qend":"639"}, {"Mismatches":"0","subject":"Ca7","query":"AB-Contig743","Send":"22007817","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"22007836","Qstart":"672","Qend":"691"}, {"Mismatches":"2","subject":"C11062332","query":"AB-Contig743","Send":"101","Gaps":"0","AlignLen":"29","Score":"42.1","Identity":"93.10","Evalue":"0.13","Sstart":"129","Qstart":"714","Qend":"742"}, {"Mismatches":"2","subject":"Ca5","query":"AB-Contig743","Send":"10391193","Gaps":"0","AlignLen":"29","Score":"42.1","Identity":"93.10","Evalue":"0.13","Sstart":"10391165","Qstart":"714","Qend":"742"}, {"Mismatches":"0","subject":"scaffold438","query":"AB-Contig743","Send":"55788","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"55769","Qstart":"1175","Qend":"1194"}, {"Mismatches":"0","subject":"scaffold1613","query":"AB-Contig743","Send":"56169","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"56188","Qstart":"367","Qend":"386"}]
please help me to find the error. thanks in advance.
I f you are using local data, it should be something like this:
var mydata = [ {query:"qry",subject:"foo"........},{query:"qry",subject:"foo"........} ];//colname,value pairs
But currently you have
mydata={"page":1,"records":1,"rows":[null,{"id":1,"cell":["AB-Contig743","Ca7","99.37","1119","6","1","33","1150","17304241","17305359","0.0","2113"]}],"total":1}
So either you have to reformat the ajax result or directly use the url property of jqgrid to call the method( the one you called in the ajax request) like this:
$("#blastform").submit(function(){
$('#blast').hide();
$('#blastresults').show();
$("#datatable").show();
var thistarget = this.target;
$("#datatable").jqGrid({
url: $(this).action,
datatype: 'json',
mtype: 'post', //
postData: $(this).serialize(),
colNames:['QueryID','SubjectID', 'Identity', 'Align-len', 'Mismatches','Gaps','QStart','QEnd','Suject-start','Subject_end','E.Value','Score'],
colModel:[ {name:'query',index:'query', width:55},
{name:'subject',index:'subject', width:90},
{name:'Identity',index:'Identity', width:100},
{name:'AlignLen',index:'AlignLen', width:80, align:"right"},
{name:'Mismatches',index:'Mismatches', width:80, align:"right"},
{name:'Gaps',index:'Gaps', width:80,align:"right"},
{name:'Qstart',index:'Qstart', width:80,align:"right"},
{name:'Qend',index:'Qend', width:80,align:"right"},
{name:'Sstart',index:'Sstart', width:150, sortable:false},
{name:'Send',index:'Send', width:150, sortable:false},
{name:'Evalue',index:'Evalue', width:10, sortable:false},
{name:'Score',index:'Score', width:10, sortable:false}, ],
rowNum:5,
rowList:[2,3,5,10],
pager: $('#pager2'),
......................

jqgrid rowlist dropdown missing

The jqgrid rowlist dropdown is missing.
Missing jqgrid rolwist dropdown http://www.managementlevelreview.com/images/MissingRowlist.jpg
My code:
jQuery("#gridsavedAfterHours").jqGrid({
url:'/AfterHours/GetsavedAfterHours?userid=${thisuserid}&&orgcode=${thisorgcode}',
datatype: 'json',
colNames:['ID','Name','Branch','Start','End'],
colModel:[
{name:'AfterHoursId', index:'AfterHoursId', width:25, sortable:true, search:false, key: true},
{name:'UserFullName', index:'UserFullName', width:150, sortable:true, search:false},
{name:'UserOrgLongName', index:'UserOrgLongName', width:150, sortable:true, search:false},
{name:'enteredStartDate', index:'enteredStartDate', width:100, sortable:true, search:false},
{name:'enteredEndDate', index:'enteredEndDate', width:100, sortable:true, search:false}
],
rowNum:${DefaultRowNumber ?? 10},
rowList:[10,25,50,100],
pager: jQuery('#savedAfterHoursPager'),
onSelectRow: function(id){},
sortname: 'Start',
viewrecords: true,
sortorder: 'desc',
multiselect: false,
imgpath: '/Content/images',
caption: 'After Hours',
height: 'auto',
width: '800px',
emptyrecords: 'No After Hours data found.'
}).navGrid('#savedAfterHoursPager',
{edit:false,add:false,del:false},
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{ //search options
closeOnEscape:true /* allow the view dialog to be closed when user press ESC key*/
}
);
I suppose that you defined some CSS style for input field which has large width attribute and probably some other attributes. I recommend you to include the following additional CSS on your page
input.ui-pg-input { width: auto; }
See additionally another answer on the close subject.

setColProp not working jqGrid

I have read all the topics regarding this, and it appears that I constructed it correctly. But still the setColProp has no effect. What I am missing here? Please help. I'm using jqGrid 4.4
var grid = $("#l-drill-emp-grid")
var pager_id = 'l-drill-emp-pager';
grid.jqGrid({
data : drillgrid.rows,
datatype: "local",
colNames: ['date', 'day', 'time_In', 'time_Out', 'late','underTime', 'overTime', 'unpaidLV', 'timeOff' ],
colModel: [
{name:'date',index:'date', width:120, sorttype:'date'},
{name:'day',index:'day', width:70, align:"center", sorttype:'text'},
{name:'time_in',index:'time_in', width:80, align:"center"},
{name:'time_out',index:'time_out', width:80, align:"center"},
{name:'late',index:'late', width:80, align:"center"},
{name:'ut',index:'ut', width:80, align:"center"},
{name:'ot',index:'ot', width:80, align:"center"},
{name:'ulv',index:'ulv', width:80, align:"center"},
{name:'timeoff',index:'timeoff', width:80, align:"center"},
],
rowNum:15,
rowList:[10,15,20,30],
viewrecords: true,
loadonce: true,
pager: pager_id,
sortname: 'date',
sortorder: "desc",
height: '100%',
altRows: true,
altclass: 'oddRow',
gridComplete: function() {
grid.find(".jqgrow:odd").hover(
function() { $(this).removeClass("oddRow");},
function(event) { $(this).addClass("oddRow");}
);
},
loadComplete: function(data) {
grid.jqGrid('setColProp', 'date', {
align: "center"
});
},
});
Did you try to change other colModal options? I mean, any other than align? Because according to the documentation there are some properties that may not change.
Read this.

Ajax Data Result to jqgrid display

I have this result from AJAX call I want to pass it to jqgrid. The format is exactly the same normal jqgrid call. I dont know why its not working, any help is greatly appreciated.
{"page":null,"total":2,"records":"16","rows":[{"id":"9910003","cell":["9910003","DEMO3","Test3","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910004","cell":["9910004","DEMO4","Test4","Sat,Sun","08:00:00","17:00:00","19","0"]},{"id":"9910005","cell":["9910005","DEMO5","Test5","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910006","cell":["9910006","DEMO6","Test6","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910007","cell":["9910007","DEMO7","Test7","Sat,Sun","08:00:00","17:00:00","14","0"]},{"id":"9910008","cell":["9910008","DEMO8","Test8","Sat,Sun","21:00:00","06:00:00","19","0"]},{"id":"9910009","cell":["9910009","DEMO9","Test9","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910010","cell":["9910010","DEMO10","Test10","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910011","cell":["9910011","DEMO11","Test11","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910012","cell":["9910012","DEMO12","Test12","Sat,Sun","21:00:00","06:00:00","17","0"]},{"id":"9910013","cell":["9910013","DEMO13","Test13","Sat,Sun","21:00:00","06:00:00","16","0"]},{"id":"9910014","cell":["9910014","DEMO14","Test14","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910015","cell":["9910015","DEMO15","Test15","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910016","cell":["9910016","DEMO16","Test16","Sat,Sun","21:00:00","06:00:00","14","0"]}]}
Below is my full code:
function report_grid() {
$.ajax({
type: "POST",
url: "filter_option.php?action=filter",
data: $('#form1').serialize(),
success: function(rdata) {
jQuery("#report-grid").jqGrid({
data: rdata,
datatype: "local",
colNames:['Emp ID','firstName', 'surName', 'restDay','shift_In','shift_Out','late','undertime'],
colModel:[
{name:'emp_id',index:'emp_id', width:55},
{name:'firstname',index:'firstname', width:90},
{name:'surname',index:'surname', width:100},
{name:'restday',index:'restday', width:80, align:"right"},
{name:'shift_in',index:'shift_in', width:80, align:"right"},
{name:'shift_out',index:'shift_out', width:80,align:"right"},
{name:'late',index:'late', width:150, sortable:false},
{name:'ut',index:'ut', width:150, sortable:false},
],
height: 'auto',
width: 'auto',
rowNum:10,
rowList:[10,15,20,30,50],
pager: '#report-pager',
sortname: 'emp_id',
viewrecords: true,
sortorder: "desc",
caption:"Timesheet Summary"
});
jQuery("#report-grid").jqGrid('navGrid','#report-pager',{edit:false,add:false,del:false});
}
})
}
I tried below but no success, I think I'm missing something
data:rdata.rows
datatype:"local" // shows only the id but with correct number of records
data:rdata.rows
datatype: "json" // shows nothing at all.
Got it now, my json format is incorrect, I should refer to data array in demo page.

Resources