Populate Nested jqGrid in ASP.NET Application

In many scenarios in our web developments we usually have to show nested grids and now a days the jQGrid is very famously used for accomplishing this with ajax calls with no post back at all. This task becomes very easier when we do it using jqGrid its just another callback function which needs to be maintained for accomplishing this.

So here in this tip, I will explain how to populate the nested grid using jqGrid. First of all, we need to add the required jQuery and jqGrid JS files to our project as listed in the image below. Also, we need to add the style and images required for jqGrid plugin.

Then we need to reference them into our page as shown below:

Now, we need to add the table into the page in which we need to populate the data:

Now, let us assume we have Persons list and their respective address details. Each person might have more than one address like Home address and Office address, etc. Now we want to show the address associated with a person in the expanded grid or inner grid of the master one. Here I have taken hard coded list of persons and addresses and they are associated with the 'PersonID' attribute.

//All person listvar objPersons =
//[ { PersonID: 1, Forename: 'Adam', Surname: 'Herman', DOB: '08/04/2014' },
//{ PersonID: 2, Forename: 'Adam', Surname: 'Berman', DOB: '08/04/2014' } ];

//All addresses related to the above persons var objAddress =
//[ { PersonID: 1, AddressID: 1, AddressType: 'Home',
//AddressLine1: 'Role', AddressLine2: '#32-36, EPIP Area',
//City: 'Rourkela, Odisha', Postcode: '769016' },
//{ PersonID: 1, AddressID: 2, AddressType: 'Office',
//AddressLine1: 'Role', AddressLine2: '#32-36, EPIP Area',
//City: 'Bangalore, Karnataka', Postcode: '560093' },
//{ PersonID: 2, AddressID: 3, AddressType: 'Optional',
//AddressLine1: 'Role', AddressLine2: 'Electronic City',
//City: 'Bangalore, Karnataka', Postcode: '560093' } ];

Now we have to prepare the main method to bind all those result sets which will take the following parameters like:

• containerID - Container table id into which we will populate the data
• dataList - Data to display (here Persons List as JSON object array)
• pageSize - Size of the grid per page if paging enabled
• columnName - Column names as json formatted array
• columnModel - JSON formatted array list
• pagerId - If paging enabled the pager div element id
• gridHeight - Height of the grid in integer
• isPagerVisible - To view or hide pager
• pagerSize - Pager size
• gridWidth - Width of the grid as integer

function BindResultData(containerId, dataList, pageSize, columnName, 
columnModel, pagerId, isScroller, gridHeight, isPagerVisible, pagerSize, gridWidth) 
{ if (isScroller == true && dataList.length > 5) 
{ pageSize = dataList.length; gridHeight = 150; } 
jQuery('#' + containerId).GridUnload(); jQuery('#' + 
containerId).jqGrid({ data: dataList, datatype: "local", 
rowNum: pageSize, colNames: columnName, colModel: columnModel, pager: '', 
toppager: false, autowidth: true, gridview: true, scrollerbar: isScroller, 
height: gridHeight, width: gridWidth, cache: false, loadonce: false, rowList: [], 
pgbuttons: false, pgtext: null, viewrecords: false, recordtext: '', 
subGrid: true, subGridRowExpanded: function (subgridId, rowid) 
{ var currentRow = $('#tblData').jqGrid('getRowData', rowid); 
var filteredAddresses = []; $.each(objAddress, function (index, item) 
{ if (item.PersonID == currentRow.PersonID) { filteredAddresses.push(item); } }); 
var addressColumnNames = ['PersonID', 'AddressID', 'AddressType', 'AddressLine1', 
'AddressLine2', 'City', 'Postcode']; var addressColumnModel = [ { name: 'PersonID', 
index: 'PersonID', sortable: false, align: "center" }, 
{ name: 'AddressID', index: 'AddressID', sortable: false, align: "center" }, 
{ name: 'AddressType', index: 'AddressType', sortable: false, align: "center" }, 
{ name: 'AddressLine1', index: 'AddressLine1', sortable: false, align: "center" }, 
{ name: 'AddressLine2', index: 'AddressLine2', sortable: false, align: "center" }, 
{ name: 'City', index: 'City', sortable: false, align: "center" }, 
{ name: 'Postcode', index: 'Postcode', sortable: false, align: "center" }, ]; 
var subgridTableId = subgridId + "_t"; 
$("#" + subgridId).html("<table id='" + subgridTableId + "'>"); 
$("#" + subgridTableId).jqGrid({ datatype: "local", data: filteredAddresses, 
colNames: addressColumnNames, colModel: addressColumnModel, 
height: "100%", rowNum: 10, sortname: "Product", idPrefix: "s_" + rowid + "_" }); }, }); }

Here in the above method, the main section which is used for the nested grid creation is 'subGridRowExpanded'. This callback function will be called on expanding the master grid row and it will again create and bind the inner grid. Here, we need to manually create the inner grid ID and populate it as described in the above code example.

Finally we need to call this 'BindResultData' method with proper parameter values which will be taken care again by the below method 'PopulateData'. It will create the Column names array and column model array and pass it to the method 'BindResultData' for displaying in the grid with many other parameters which are already mentioned above.

function PopulateData() 
{ var personColumnNames = ['PersonID', 'Forename', 'Surname', 'DOB']; 
var personColumnModel = [ { name: 'PersonID', index: 'PersonID', 
sortable: false, align: "center" }, 
{ name: 'Forename', index: 'Forename', sortable: false, align: "center" }, 
{ name: 'Surname', index: 'Surname', sortable: false, align: "center" }, 
{ name: 'DOB', index: 'DOB', sortable: false, align: "center" }, ]; 
BindResultData('tblData', objPersons, 10, personColumnNames, 
personColumnModel, 'tblDataPager', 500, 'auto', true, 10, 'auto'); }

Hope this makes sense to have a good start for the nested grid implementation using jqGrid. Also the working copy of this project with VS 2012 solution is being attached with the code section of this article. Please download and go through its implementation.