jQuery Grid Plugin - jqGrid

By ghost rows I mean empty grid rows without any data. For example I get the following output:

+ Group 1 - 306 items

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

+ Group 2 - 14 items

____________________________________________

____________________________________________

____________________________________________

When I expand the group I get the subgroups with alternate empty rows

When I expand the subgroup I get all the data but with some more empty rows after the data.

On collapsing the group and re expanding it , the empty rows at the subgroup level disappears but remains at group level and item level.

I am using the latest version of jQgrid. 4.6.

Here is the test code. It also doesn't work when I set grouping as false in the grid definition and use the commented code to set the grouping dynamically.

{ id:

{ id:

{ id:

{ id:

{ id:

{ id:

{ id:

{ id:

{ id:

];

grid.jqGrid({

data: mydata,

datatype:

colNames: [

colModel: [

{ name:

{ name:

{ name:

{ name:

{ name:

],

pager:

toppager:

cloneToTop:

rowNum: 10,

rowList: [5, 10, 20, 50],

sortname:

sortorder:

viewrecords:

height:

caption:

grouping:

groupingView: {

groupField: [

groupColumnShow: [

groupText: [

groupCollapse:

groupOrder: [

groupSummary: [

showSummaryOnHide:

}

});

var mydata = ["1", Member: "Love, Bruce", name: "blove@transre.com", Title: "AVP", Dept: "A" },"2", Member: "Seymour, William", name: "wseymour@transre.com", Title: "UW", Dept: "B" },"3", Member: "Spicer, James", name: "jspicer@transre.com", Title: "UW", Dept: "A" },"4", Member: "Morris, William", name: "mwilliam@transre.com", Title: "VP", Dept: "B" },"5", Member: "Hadley, Julie", name: "jhadley@transre.com", Title: "AVP", Dept: "C" },"6", Member: "McDermott, Catherine", name: "cmcdermott@transre.com", Title: "UW", Dept: "D" },"7", Member: "Hojnowski, Daniel", name: "dhojnowski@transre.com", Title: "AVP", Dept: "D" },"8", Member: "Marcucci, Janine", name: "jmarcucci@transre.com", Title: "UW", Dept: "D" },"9", Member: "McKeon, Paul", name: "pmckeon@transre.com", Title: "SVP", Dept: "E" },var grid = $("#list");"local",'No', 'Member Name', 'Member Email','Title','Dept'],'id', index: 'id', key: true, width: 70, sorttype: "int" },'Member', index: 'Member', width: 200, sorttype: "date" },'name', index: 'name', width: 200 },'Title', index: 'Title', hidden: false, width: 50 },'Dept', index: 'Dept', hidden: false, width: 50 }'#pager',true,true,'id','asc',true,"100%","Team Member",true,'Title','Dept'],false,false],'<b>{0} - {1} Item(s)</b>'],false,'asc','asc'],true,true],true,// grid.jqGrid('navGrid', '#pager', { search: true, cloneToTop: true });

jQuery(

"#list").navGrid('#pager', { cloneToTop: true, reload: true, edit: false, add: true, del: true, view: false, search: false }, {}, {}, {}, {}, {}, {})// remove some double elements from one place which we not need double

var topPagerDiv = $('#' + grid[0].id + '_toppager')[0]; // "#list_toppager"

$(

"#" + grid[0].id + "_toppager_center", topPagerDiv).remove(); // "#list_toppager_center"

$(

$(

".ui-paging-info", topPagerDiv).remove();var bottomPagerDiv = $("div#pager")[0];"#add_" + grid[0].id, bottomPagerDiv).remove(); // "#add_list"

$(

"#del_" + grid[0].id, bottomPagerDiv).remove(); // "#del_list"

$(

"#refresh_" + grid[0].id, bottomPagerDiv).remove(); // "#refresh_list"

usergrid.jqGrid('groupingGroupBy', ['Title','Dept'], {

groupOrder: ['desc', 'desc'],

groupColumnShow: [false, false],

groupText: ['<b>{0} - {1} Item(s)</b>'],

groupCollapse: true,

groupSummary: [true, true],

showSummaryOnHide: true,

});

usergrid.jqGrid('groupingGroupBy', ['Dept'], {

groupOrder: ['desc'],

groupColumnShow: [false],

groupText: ['<b>{0} - {1} Item(s)</b>'],

groupCollapse: true,

groupSummary: [true],

showSummaryOnHide: true,

});

*/

var usergrid = $('#list');/* 

var mydata = [

{ id:

"1", Member: "Love, Bruce", name: "blove@abc.com", Title: "AVP", Dept: "A" },

{ id:

"2", Member: "Jack, Daniels", name: "Daniels@abc.com", Title: "UW", Dept: "B" },

{ id:

"3", Member: "Space, James", name: "jSpace@abc.com", Title: "UW", Dept: "A" },

{ id:

"4", Member: "Morris, William", name: "mwilliam@abc.com", Title: "VP", Dept: "B" },

{ id:

"5", Member: "Hadley, Julie", name: "jhadley@abc.com", Title: "AVP", Dept: "C" },

{ id:

"6", Member: "McCenroy, Catherine", name: "cMcCenroy@abc.com", Title: "UW", Dept: "D" },

{ id:

"7", Member: "Happy, Dan", name: "dHappy@abc.com", Title: "AVP", Dept: "D" },

{ id:

"8", Member: "March, Jenine", name: "jmarch@abc.com", Title: "UW", Dept: "D" },

{ id:

"9", Member: "McKeon, Pat", name: "pmckeon@abc.com", Title: "SVP", Dept: "E" },

];

var grid = $("#list");

grid.jqGrid({

data: mydata,

datatype:

"local",

colNames: [

'No', 'Member Name', 'Member Email','Title','Dept'],

colModel: [

{ name:

'id', index: 'id', key: true, width: 70, sorttype: "int" },

{ name:

'Member', index: 'Member', width: 200, sorttype: "date" },

{ name:

'name', index: 'name', width: 200 },

{ name:

'Title', index: 'Title', hidden: false, width: 50 },

{ name:

'Dept', index: 'Dept', hidden: false, width: 50 }

],

pager:

'#pager',

toppager:

true,

cloneToTop:

true,

rowNum: 10,

rowList: [5, 10, 20, 50],

sortname:

'id',

sortorder:

'asc',

viewrecords:

true,

height:

"100%",

caption:

"Team Member",

grouping:

true,

groupingView: {

groupField: [

'Title','Dept'],

groupColumnShow: [

false,false],

groupText: [

'<b>{0} - {1} Item(s)</b>'],

groupCollapse:

false,

groupOrder: [

'asc','asc'],

groupSummary: [

true,true],

showSummaryOnHide:

true,

}

});

// grid.jqGrid('navGrid', '#pager', { search: true, cloneToTop: true });

jQuery(

"#list").navGrid('#pager', { cloneToTop: true, reload: true, edit: false, add: true, del: true, view: false, search: false }, {}, {}, {}, {}, {}, {})

// remove some double elements from one place which we not need double

var topPagerDiv = $('#' + grid[0].id + '_toppager')[0]; // "#list_toppager"

$(

"#" + grid[0].id + "_toppager_center", topPagerDiv).remove(); // "#list_toppager_center"

$(

".ui-paging-info", topPagerDiv).remove();

var bottomPagerDiv = $("div#pager")[0];

$(

"#add_" + grid[0].id, bottomPagerDiv).remove(); // "#add_list"

$(

"#del_" + grid[0].id, bottomPagerDiv).remove(); // "#del_list"

$(

"#refresh_" + grid[0].id, bottomPagerDiv).remove(); // "#refresh_list"

var usergrid = $('#list');

/*

usergrid.jqGrid('groupingGroupBy', ['Title','Dept'], {

groupOrder: ['desc', 'desc'],

groupColumnShow: [false, false],

groupText: ['<b>{0} - {1} Item(s)</b>'],

groupCollapse: true,

groupSummary: [true, true],

showSummaryOnHide: true,

});

usergrid.jqGrid('groupingGroupBy', ['Dept'], {

groupOrder: ['desc'],

groupColumnShow: [false],

groupText: ['<b>{0} - {1} Item(s)</b>'],

groupCollapse: true,

groupSummary: [true],

showSummaryOnHide: true,

});

*/