posting row_id with URL: when expanding jqgrid to load subgrid - jqgrid

I m trying to load a jqgrid as a subgrid by posting parent row key (dept_id) to url:'sub_grid_load_dept.php', when expanding grid.
But have no idiea how to do it in a simple way.
here is my code
jQuery("#grid-dept").jqGrid({
url:'grid_load_dept.php',
datatype: "xml",
colNames:['dept id','dept prefix','dept name'],
colModel:[
{name:'dept_id',index:'dept_id', width:200, editable: true},
{name:'dept_prefix',index:'dept_prefix', width:200, editable: true},
{name:'dept_name',index:'dept_name', width:200, editable: true}
],
loadonce:false,
mtype: "POST",
pager: '#grid-dept-pager',
sortname: 'dept_id',
sortorder: "asc",
editable: true,
caption: "department",
editurl:"grid_edit_dept.php",
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id)
{
var subgrid_table_id;
var pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+ pager_id +"' class='scroll'></div>");
$("#" + subgrid_table_id).jqGrid({
url:'sub_grid_load_dept.php',
datatype: "xml",
colNames: ['id','dept_id','office_id','dept_head','date_from','date_to','remarks'],
colModel:
[
{name:"id",index:"id",width:80,key:true, editable:true},
{name:"dept_id",index:"dept_id",width:130, editable:true},
{name:"office_id",index:"office_id",width:80,align:"right", editable:true},
{name:"dept_head",index:"dept_head",width:80,align:"right", editable:true},
{name:"date_from",index:"date_from",width:100,align:"right", editable:true},
{name:"date_to",index:"date_to",width:100,align:"right", editable:true},
{name:"remarks",index:"remarks",width:100,align:"right", editable:true}
],
caption: "Department Details",
mtype: "POST",
sortname: 'id',
sortorder: "asc",
editable: true,
pager:pager_id,
editurl:"sub_grid_edit_dept.php"
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:false,search:true,refresh:true})
}
What I mean is how to post 'row_id' in subGridRowExpanded: function(subgrid_id, row_id)
by including in URL: proterty.maybe as an array.

I have found Solution:
[http://stackoverflow.com/questions/12823591/how-to-pass-the-selected-row-id-to-the-subgrids-url-in-jqgrid][1]
Used postDATA:An associative array which appends directly to the url.
postData: {prodcutid: row_id}

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
});

How to pass the selected row id to the subgrid's url in jqGrid

I need to pass an extra paramter (i.e. the selected row_id) to the url that I am using for to show the sub grid. But Firebug console panel shows no extra parameter been passed. (of course the server side code is also not receiving it).
Below is my code,
myGrid.jqGrid({
url: 'server.php',
datatype: "json",
mtype: 'POST',
width: 900,
height:500,
sortname: 'productid',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example",
rowNum: 100,
subGrid: true,
colNames: ['Product Id', 'Product Name', 'Supplier Id', 'Unit Price'],
colModel: [
{
name: 'productid',
index: 'productid',
search: true,
width: 55
}, {
name: 'productname',
index: 'productname',
width: 90,
search: true
}, {
name: 'supplierid',
index: 'supplierid',
width: 100,
search: false
}, {
name: 'unitprice',
index: 'unitprice',
width: 80,
search: false,
align: "right",
search: true
}
],
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id)
.html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id)
.jqGrid({
url: "server.php",
datatype: "json",
colNames: ['Product Id', 'Product Name'],
width:700,
colModel: [{
name: 'productid',
index: 'productid',
width: 55
}, {
name: 'productname',
index: 'productname',
width: 90
}],
rowNum: 20,
sortname: 'num',
sortorder: "asc"
data: {prodcutid: row_id}
});
}
How to pass the selected row id to the subgrid's url?
Thanks
The data parameter has another meaning in jqGrid as in jQuery.ajax. So you should replace
data: {prodcutid: row_id}
in the SubGrid to
postData: {prodcutid: row_id}

jqGrid Subgrid data not showing up

I have seen the same question being asked but none of them contained an answer that I could use. I am using jqgrid 4.4. The main grid loads data fine, in the subgrid I can see the response from my java controller but not sure how to get it to show up.
function(){
jQuery("#subGrid").jqGrid({
url: CONTEXT_ROOT+"/cartonPremium",
id:'gridtable',
datatype: "json",
height: 190,
jsonReader : {
root: 'gridModel',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
colNames:['idPremium','Name','Week', 'Departure Region' ],
colModel:[
{name:'idPremium',hidden:false, width:100},
{name:'name',index:'name', width:300},
{name:'sequence',index:'sequence', width:90},
{name:'departureRegion',index:'departureRegion',width:100}
],
hidegrid: false,
rowNum:20,
rowList:[20,40,80],
pager: '#psubGrid',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
multiselect: false,
sortable: true,
autowidth: false,
pagerButtons:true,
navigator:true,
//loadonce: true,
altRows: true,
viewsortcols: [true,'vertical',true],
subGrid: true,
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e"//,
//expand all rows on load
//"expandOnLoad" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id,
datatype: "json",
colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
colNames:['idCasePackOptions'],
colModel: [
{name:'idCasePackOptions', width:170,hidden:false}
],
rowNum:8,
pager: pager_id,
sortname: 'idCasePackOptions',
sortorder: "asc",
sortable: true,
height: 400
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false});
}
}
);
jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}
);
Here is response from server
{"total":1,"page":1,"gridModel":[{"idCasePackOptions":1},{"idCasePackOptions":2},{"idCasePackOptions":3},{"idCasePackOptions":4},{"idCasePackOptions":5},{"idCasePackOptions":6}],"records":6,"rows":8}
Help!! What am I missing?
I finally got it to working...yipeee!!! the magic that was missing from the subgrid
jsonReader: {
root: 'gridModel',
repeatitems: false
}
So the working version looks like this
$(document).ready(
function(){
jQuery("#subGrid").jqGrid({
url: CONTEXT_ROOT+"/cartonPremium",
id:'gridtable',
datatype: "json",
height: '100%' ,
mtype: 'POST',
jsonReader : {
root: 'gridModel',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
colNames:['idPremium','Name','Week' ],
colModel:[
{name:'idPremium',hidden:false, width:100},
{name:'name',index:'name', width:300},
{name:'sequence',index:'sequence', width:90}
],
hidegrid: false,
rowNum:20,
rowList:[20,40,80],
pager: '#psubGrid',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
multiselect: false,
sortable: true,
autowidth: false,
pagerButtons:true,
navigator:true,
//loadonce: true,
altRows: true,
viewsortcols: [true,'vertical',true],
subGrid: true,
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"reloadOnExpand" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id,
datatype: "json",
mtype: 'POST',
colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
colModel: [
{name:'idCasePackOptions', width:170,hidden:false},
{name:'cypharecommended',index:'cypharecommended', width:170},
{name:'distributorapproved',index:'distributorapproved', width:170},
{name:'height',index:'height', width:100},
{name:'length',index:'length', width:80, align:"right"},
{name:'statuscode',index:'statuscode', width:90, align:"right"},
{name:'weight',index:'weight', width:100,align:"right"},
{name:'width',index:'width', width:100}
],
rowNum:8,
pager: pager_id,
sortname: 'idCasePackOptions',
sortorder: "asc",
viewrecords: true,
sortable: true,
height: '100%' ,
autowidth: true,
jsonReader: {
root: 'gridModel',
repeatitems: false
}
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false});
}
}
);
//jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}
);
Your data in the subgrid will not be displayed (as well) if one of your given functions do not exist. So if you make a typo empty lines will be displayed:
afterSave: ReloadSubGrid, onError: UpdateFailed, delOptions:...
...
function ReloadSbuGrid(rowid, response) {
...
}
Typo: ReloadSbuGrid should have been ReloadSubGrid

jqGrid: Search box is disabled!

I am new to jqGrid and Stack Overflow as well..
Well, I have a problem regarding the jqGrid SearchBox. Why does it show the search box in disabled mode?
Here is my code.
jQuery(document).ready(function(){
var jsonData = '{"StartDate":"01/01/2009", "EndDate":"12/12/2010", "DateFormat":"dd/MM/yyyy", "BatchId":"21"}';
jQuery("#attendance-grid").jqGrid({
datatype: "json",
mtype: "POST",
url: "url/function",
postData: jsonData,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
search: true,
multipleSearch : true,
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
height: 'auto',
rowNum: 10,
rowList: [10,20,30],
colNames:['Date', 'Batch', 'Enroolment No.', 'FName', 'MName', 'LName', 'Branch'],
colModel:[
{name:'date',index:'date', width:90, sorttype:"date", datefmt: 'm/d/Y', formatter:"date"},
{name:'batch_name',index:'batch_name', width:150, sortable:true},
{name:'Stud_EnrollNo',index:'Stud_EnrollNo', width:100, sortable:true},
{name:'stud_fname',index:'stud_fname', width:80, sortable:true},
{name:'stud_mname',index:'stud_mname', width:80, sortable:true},
{name:'stud_lname',index:'stud_lname', width:80, sortable:true},
{name:'currbranch',index:'currbranch', width:50, sortable:false}
],
pager: "#pattendance-grid",
loadtext: 'Loading...',
sortname: 'stud_fname',
viewrecords: true,
gridview: true,
rownumbers: true,
sortorder: 'desc',
grouping:true,
groupingView : {
groupField : ['stud_fname'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : true,
groupOrder: ['desc']
},
caption: "Attendance Report"
}).navGrid('#pattendance-grid',
{ search:true,
view: true,
del: false,
add: false,
edit: false,
searchtext:"Search" },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true,
closeAfterSearch: true }, // search options
{}
);
Probably your main problem is that you use postData parameter in the wrong way. If you use is as a string, then the postData overwrite all other typical jqGrid parameters. Try to change postData parameter as
postData: {
StartDate:"01/01/2009",
EndDate:"12/12/2010",
DateFormat:"dd/MM/yyyy",
BatchId:21
}
Moreover you should not use multipleSearch:true as jqGrid parameter: only inside of parameters of navGrid function it has any sense.
What you additionally could needed is
serializeRowData: function (data) {return JSON.stringify(data);}
where JSON.stringify is a part of json2.js from here

JQGrid : subgrid as a GRID with a navigation bar

I am using JQGrid and displaying subGrid as a JQGRID itself.
I was wondering if there is a way to display the navigation bar for the subgrid too.
I tried following the way its being done for JQGrid, but in vain.
Thanks in advance!
Make sure that in the subGrid jqGRid function you also set the pager property to the pager id in the subgrid
... subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id)
{
var subgrid_table_id;
var pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+ pager_id +"' class='scroll'></div>");
$("#" + subgrid_table_id).jqGrid({
url:"ListSub/"+ row_id,
datatype: "json",
colNames: ['Street1','Street2','Street3','Zip','Place','Country'],
colModel:
[
{name:"Street1",index:"Street1",width:80,key:true, editable:true},
{name:"Street2",index:"Street2",width:130, editable:true},
{name:"Street3",index:"Street3",width:80,align:"right", editable:true},
{name:"Zip",index:"Zip",width:80,align:"right", editable:true},
{name:"Place",index:"Place",width:100,align:"right", editable:true},
{name:"Country",index:"Country",width:100,align:"right", editable:true}
],
caption: "Offices",
height: "100%",
rowNum:10,
sortname: 'Street1',
sortorder: "asc",
pager:pager_id
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false})
}....
subGrid: true,
subGridRowExpanded: function(ParentGridID, rowid) {
var datagridSub, navGrid;
SubGridID = ParentGridID+"_t";
//alert(rowid);
navGrid = "p_"+datagridSub;
$("#"+ParentGridID).html("<table id='"+SubGridID+"' class='scroll'></table><div id='"+PagerID+"' class='scroll'></div>");
jQuery("#"+SubGridID).jqGrid({
url:'service url'+rowid,
datatype: "json",
type: "GET",
colNames: ['Id','MID','VendorCode1','VendorCode2','Percentage'],
width:700,
colModel: [
{name:"id",index:"id",width:30},
{name:"mid",index:"mid",width:30},
{name:"vendorcode1",index:"vendorcode1",width:40},
{name:"vendorcode2",index:"vendorcode2",width:40},
{name:"percentage",index:"percentage",width:70}
],
jsonReader: {
repeatitems: false, // To Bind the Data in Grid, if it is JSON format.
id: "id",
root: function (obj) { return obj; } // To Bind the Data in Grid.
// page: function () { return 1; },
//total: function () { return 1; },
//records: function (obj) { return obj.length; },
},
rowNum:20,
pager: '#PagerID',
sortname: 'num',
sortorder: "asc",
postData: {id: rowid},
height: '120%',
});
}

Resources