$("#jqGrid").jqGrid({
url: "getJsonData",
async: true,
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'CLIENT', name: 'client', width: 60, sorttype: 'string',
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string',
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ lable:"Seq Id", hidden:true, name: 'seqId' }
],
loadComplete: function () {
var rowIds = $('#jqGrid').jqGrid('getDataIDs');
for (i = 0; i < rowIds.length; i++) {//iterate over each row
rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);
if (rowData['testResults'] === "Pass") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
}
if (rowData['testResults'] == "Fail") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
}
}
},
onSelectRow:function(rowid){
var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
if (rowData['testResults'] == "Fail") {
console.log("clicked");
$(this).jqGrid("toggleSubGridRow", rowid);
}
},
subGrid: true,
subgridtype:"json",
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
console.log("rowData:::"+rowData);
var seqId=rowData['seqId'];
console.log(seqId)
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"getCommentsJsonData/"+seqId,
datatype: "json",
mtype: "GET",
height:'auto',
width: 1400,
colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
colModel: [
{name:"fileName",index:"fileName"},
{name:"fieldName",index:"fieldName"},
{name:"actualFieldValue",index:"actualFieldValue"},
{name:"excpectedFiledValue",index:"excpectedFiledValue"},
],
loadonce:true,
rowNum:20
});
},
loadonce: true,
//navOptions: { reloadGridOptions: { fromServer: true } },
viewrecords: true,
width: 1390,
height: 300,
rowNum: 3000,
colMenu : true,
shrinkToFit : true,
grouping: true,
hoverrows:false,
groupingView: {
groupField: ["client"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [false],
groupCollapse: false
},
scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
sortable: true,
caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid("hideCol", "subgrid");
// activate the build in search with multiple option
$('#jqGrid').navGrid("#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true,
},
{}, // edit options
{}, // add options
{}, // delete options
{ multipleSearch: true } // search options - define multiple search
);
$('.colmenu').on('click',function(event){
event.preventDefault();
})
// on chang select value change grouping
jQuery("#chngroup").change(function(){
var vl = $(this).val();
if(vl) {
if(vl === "clear") {
jQuery("#jqGrid").jqGrid('groupingRemove',true);
} else {
jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
}
}
});
When I set loadonce = true in my sub grid not working but when I changed this to loadonce = false then subgrid is working but my pagination and searching functionalities are not working.
$(document).ready(function(){
$.jgrid.styleUI.Bootstrap.base.rowTable = " table1 table-bordered";
var previousRowId = 0;
$("#jqGrid").jqGrid({
url: "getJsonData",
async: true,
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'CLIENT', name: 'client', width: 60, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{
lable:"Seq Id",
hidden:true,
name: 'seqId'
}
],
loadComplete: function () {
var rowIds = $('#jqGrid').jqGrid('getDataIDs');
for (i = 0; i < rowIds.length; i++) {//iterate over each row
rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);
if (rowData['testResults'] === "Pass") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
}
if (rowData['testResults'] == "Fail") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
}
}
},
onSelectRow:function(rowid){
var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
if (rowData['testResults'] == "Fail") {
console.log("clicked");
$(this).jqGrid("toggleSubGridRow", rowid);
}
},
subGrid: true,
subgridtype:"json",
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
console.log("rowData:::"+rowData);
var seqId=rowData['seqId'];
console.log(seqId)
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"getCommentsJsonData/"+seqId,
datatype: "json",
mtype: "GET",
height:'auto',
width: 1400,
colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
colModel: [
{name:"fileName",index:"fileName"},
{name:"fieldName",index:"fieldName"},
{name:"actualFieldValue",index:"actualFieldValue"},
{name:"excpectedFiledValue",index:"excpectedFiledValue"},
],
loadonce:true,
rowNum:20
});
},
loadonce: true,
//navOptions: { reloadGridOptions: { fromServer: true } },
viewrecords: true,
width: 1390,
height: 300,
rowNum: 3000,
colMenu : true,
shrinkToFit : true,
grouping: true,
hoverrows:false,
groupingView: {
groupField: ["client"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [false],
groupCollapse: false
},
scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
sortable: true,
caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid("hideCol", "subgrid");
// activate the build in search with multiple option
$('#jqGrid').navGrid("#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true,
},
{}, // edit options
{}, // add options
{}, // delete options
{ multipleSearch: true } // search options - define multiple search
);
$('.colmenu').on('click',function(event){
event.preventDefault();
})
// on chang select value change grouping
jQuery("#chngroup").change(function(){
var vl = $(this).val();
if(vl) {
if(vl === "clear") {
jQuery("#jqGrid").jqGrid('groupingRemove',true);
} else {
jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
}
}
});
});
I will say wow!!! you try to use fast all the properties of the grid in one grid.
Lets go from the beginning.
The grid option
... async : true, ...
is put wrong and it does not have effect. To have effect this option should be put in ajaxGridOptions object. See docs here, but to be honest this option in ajax is by default true, so there is no need to use it.
The code in grid complete is total ineffective. With the same success and more elegant is to use rowattr event This mean you do not need to use getRowData and setRowData methods and just to analyse the row and put the appropriate class.
I'm not sure what you try to use in onSelectRow. I suggest you first to disable this event, which causes your problems and show the subgrid row which you hide
The option scroll : 1 will not work if grouping is enabled grouping : true
What I suggest you first is to fix these problems in the grid and then let us know if there is a problem.