Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Populate Nested jqGrid in ASP.NET Application

, 16 Apr 2014
Rate this:
Please Sign up or sign in to vote.
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

SRS(The Coder)
Software Developer
India India
Having more than 4 years of development experience in various Microsoft Technologies like :-
ASP.Net, VB.Net, MVC, SQL Server, WCF, MS Commerce Server, Xamarin etc.
 
Also hands on experience on the client side coding with JavaScript/jQuery.
Worked with third party ASP.net controls like Telerik and DevExpress as well.
 
Very much interested in Microsoft technologies to explore and implement. Now started to helping coders who really need me.
 

My Blog

Microsoft Technology Master
 

Programming Communities

JS Fiddle | Stack Overflow
 

Awards

Microsoft MCTS Certification in ASP.Net 4.0
Follow on   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 1 PinmemberRobDeVoer23-Apr-14 15:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 16 Apr 2014
Article Copyright 2014 by SRS(The Coder)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid