Populate Nested jqGrid in ASP.Net Application

Here in this article 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 like as 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 + "'></table>");                    $("#" + 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 code section of this article. Please download and go through its implementation.

CodeProject