Nested grid: local parent grid data and remotely fetch child records

[Chaitanya21]

Hi,

I have modified Nested grid example given in demo.

I have Branch List which I have fetching when the page is called.

branch JSON data:

Code: [Select]

var data =[{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":null,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"branchId":1,"branchCode":null,"branchName":"brach code1","companyDTO":null},{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":null,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"branchId":3,"branchCode":null,"branchName":"brach code3","companyDTO":null},{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":null,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"branchId":4,"branchCode":null,"branchName":"branch code 4","companyDTO":null}]
On the basis of branch id, I m fetching department and their manager name in child grid.


 

Code: [Select]

$(function () {
        var colM = [
            { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable:false },
            { title: "Branch Id", dataType: "integer", dataIndx: "branchId", editable: false, width: 80 },
            { title: "Branch Name", width: 100,dataType:"string", dataIndx: "branchName" }
            ];

        var dataModel = {
            location: "local",
            sorting: "local",           
            dataType: "JSON",
            recIndx: "branchId",
            data: data,
        }

        var $gridMain = $("div#grid_md").pqGrid({
            width: 860, height: 500,
            dataModel: dataModel,
            virtualX: true, virtualY: true,
            editable: false,
            colModel: colM,
            wrap: false,
            hwrap: false,           
            numberCell: { show: false },
            title: "<b>Shipping Orders</b>",                       
            resizable: true,
            freezeCols: 1,           
            selectionModel: { type: 'cell' },
             detailModel: {
                cache: true,
                collapseIcon: "ui-icon-plus",
                expandIcon: "ui-icon-minus",
                init: function (ui) {
                    alert("here")
                    var rowData = ui.rowData,                       
                        detailobj = gridDetailModel( $(this), rowData ), //get a copy of gridDetailModel                       
                        $grid = $("<div></div>").pqGrid( detailobj ); //init the detail grid.

                    return $grid;
                }
            } 
        });
        /*
         * another grid in detail view.
         * returns a new copy of detailModel every time the function is called.
         * @param $gridMain {jQuery object}: reference to parent grid
         * @param rowData {Plain Object}: row data of parent grid
         */
          var gridDetailModel = function( $gridMain, rowData ){
             return {
                 height: 130,
                 pageModel: { type: "local", rPP: 5, strRpp: "" },
                 dataModel: {
                     location: "remote",
                     sorting: "local",
                     dataType: "json",
                     method: "POST",
                     sortIndx: "branchId",
                     error: function () {
                         $gridMain.pqGrid( 'rowInvalidate', { rowData: rowData });
                     },
                     url: "/ExpenseManagement/getDepartmentHead"
                 },
                 colModel: [
                     { title: "Branch ID", width: 80, dataIndx: "branchId" }
          ],
                 editable: false,
                  groupModel: {
                     dataIndx: ["branchId"],
                     dir: ["up"],
                     title: ["{0} - {1} product(s)"],
                     icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
                 },               
                 flexHeight: true,
                 flexWidth: true,
                 numberCell: { show: false },
                 title: "Department heads Details",
                 showTop: false,
                 showBottom: false
             };
         };

    });

http://jsfiddle.net/pb5kpred/39/
This link is not working because getting error ,
Uncaught TypeError: Cannot read property 'children' of null in:

Please help.