How to modify the row of parent grid on child grid cell click in nested grid ?

[aniket.kulkarni]

I want to modify the row of parent grid on click of any cell from child grid.

I am able to bind the cell click event and able to get the row data of child grid, now I want that child row data to change the parent grid.

Here is code :

Code: [Select]

$(function () {
    var colM = [
        { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable:false },
        { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
        { title: "Customer Name", width: 120, dataIndx: "ContactName" },
        { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer", editable: false },
        { title: "Order Date", width: "100", dataIndx: "OrderDate", dataType: "date" },
        { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date" },
        { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
        { title: "Shipping Via", width: 100, dataIndx: "ShipVia" },
        { title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight" },
        { title: "Shipping Name", width: 160, dataIndx: "ShipName" },
        { title: "Shipping Address", width: 200, dataIndx: "ShipAddress" },
        { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
        { title: "Shipping Region", width: 120, dataIndx: "ShipRegion" },
        { title: "Shipping Postal Code", width: 140, dataIndx: "ShipPostalCode" }
    ];
 
    var dataModel = {
        location: "remote",
        sorting: "local",           
        dataType: "JSON",
        method: "GET",
        recIndx: "OrderID",
        rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
        url: "Shipping",
        //url: "/pro/orders.php",//for PHP
        getData: function (dataJSON) {
            var data = dataJSON;
            //expand the first row.
            data[0]['pq_detail'] = { 'show': true };
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
        }
    }
   
    var $gridMain = $("div#grid_md").pqGrid({
        width: 860, height: 500,
        dataModel: dataModel,
        editable: false,
        colModel: colM,
        wrap: false,
        hwrap: false,           
        numberCell: { show: false },
        title: "<b>Shipping Orders</b>",                       
        resizable: true,
        freezeCols: 1,
        freezeRows: 0,
        selectionModel: { type: 'cell' },
        detailModel: {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
                var rowData = ui.rowData,
                    orderID = rowData["OrderID"];
 
                //make a deep copy of gridDetailModel
                var objCopy = $.extend(true, {}, gridDetailModel);
 
                objCopy.dataModel.url = "OrderData?orderId=" + orderID;
                objCopy.dataModel.error = function () {
                    $gridMain.pqGrid("rowInvalidate", {rowData:rowData});
                };
                var $grid = $("<div/>").pqGrid(objCopy);
               
                $grid.on( "pqgridcellclick", function( event, ui ) {
           
            alert("Inside cell click");
            //here I want to modify the parent grid row with child grid row
            });             
                return $grid;
            }
        }
    });   
 
    //details grid
    var gridDetailModel = {
        height: 130,
        pageModel: { type: "local", rPP: 5, strRpp: "" },
        dataModel: {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "ProductName",
            getData: function (dataJSON) {
                return { data: dataJSON };
            }
        },
        colModel: [
            { title: "Order ID", width: 80, dataIndx: "OrderID" },
            { title: "Product ID", width: 80, dataType: "integer", dataIndx: "ProductID" },
            { title: "Product Name", width: 200, dataIndx: "ProductName" },
            { title: "Unit Price", width: "80", align: "center", dataIndx: "UnitPrice", dataType: "float",
                summary: {
                    type: ["sum"],
                    title: ["<b style='font-weight:bold;'>Total Price:</b> ${0}"]
                }
            },
            { title: "Quantity", align: "center", width: 85, dataIndx: "Quantity", dataType: "integer",
                summary: {
                    type: ["sum"],
                    title: ["<b style='font-weight:bold;'>Total Qty:</b> {0}"]
                }
            },
            { title: "Discount", width: 80, align: "center", dataIndx: "Discount", dataType: "float" }
        ],
        editable: false,
        groupModel: {
            dataIndx: ["OrderID"],
            dir: ["up"],
            title: ["{0} - {1} product(s)"],
            icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
        },
        freezeCols: 0,
        flexHeight: true,
        flexWidth: true,
        numberCell: { show: false },
        title: "Order Details",
        showTop: false,
        showBottom: false
    };
});

If you want more information let me know.