Refresh jqGrid by Ajax

Question

I use two jqgrid. I want when click on row in grid1 then grid2 show data by Ajax on base parameters of grid1. How to change data of grid2 by Ajax? this code for grid2:

$("#gridrelatedLette").jqGrid(
{
    url: "GetLetterInformationHandler.ashx?CurrentUser=" + 1157 + "&IndCode=" + rowData["PctIndCode"] + "&IndSerial=" + rowData["PctIndNum"] + "&TabName=relatedLetters",
    datatype: 'json',
    width: $("#relatedLetterTab").width()-20,
    height: a1,
    direction: "rtl",
    colNames: ['1', '2', '2', '3', '4', '5','6',],
    colModel: [
        { name: 'IRltType', width: 40, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettDate', width: 60, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettNum', width: 60, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettType', width:30, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IndTopic', width: 100, sortable: false, hidden: false, template: CenterTemplate },

    ],
    rowNum: 20,
    loadonce: true,
    rowList: [5, 10, 20],
    recordpos: "left",
    ignoreCase: true,
    toppager: true,
    viewrecords: true,
    sortorder: "desc",
    scrollOffset: 1,
    editurl: 'clientArray',
    shrinkToFit: true ,
    jsonReader:
    {
        repeatitems: false,
    },
    rowattr : function(rd) {
        return { "class": "myRowClass" };
    },
    gridview: true,
});

Answer 1

The code of master/details scenario looks like following:

1. First of all one use datatype: "local" initially for the second (details) grid. As the result the details grid stay empty till no rows in the first (master) grid is selected. No request to the url of the second (details) grid will be made initially.
2. If the first (master) grid will be reloaded (after the click on "Reload Grid" button of navGrid) the data of the second grid must be removed. One can reset optionally datatype to "local" value too.
3. One can use postData with properties defined as function to append parameters to the URL if one use HTTP GET operation. See the answer for details. It allows to implement dynamical values of the parameters in mostly natural way. Additionally the values of parameters will be automatically encoded using encodeURIComponent and you will have correct URL.
4. It's frequently a problem, that details grid (the second grid) can use the same rowids as the master grid (the first grid). To prevent the problem with id duplicates I recommend to use idPrefix at least in one from the grids. For example you can use idPrefix: "d_" for the details grid.
5. Because you set explicitly datatype to "json" before reloading of data from the server you can safe use loadonce: true for the second (details) grid. After the loading the data from the server datatype will be automatically set to "local", but you will have at the moment the data which corresponds selected row of the master grid.

The main schema of the code could be the following

var $master = $("#grid1"), $details = ("#grid2");

$master.jqGrid({
    colModel: [
        ...
        { name: "PctIndCode", ... },
        { name: "PctIndNum", ... }
    ],
    onSelectRow: function (rowid) {
        // set datatype to "json" and reload the grid.
        $details.jqGrid("setGridParam", { datatype: "json" })
            .triggerHandler("reloadGrid", [{current: true, page: 1}]);
    },
    loadComplete: function () {
        var selRowId = $(this).jqGrid("getGridParam", "selrow");
        if (selrow === null) {
            // no row selected after reloading of the master grid
            $details.jqGrid("setGridParam", { datatype: "local" })
                .triggerHandler("reloadGrid", [{page: 1}]);
        }
    },
    toppager: true,
    gridview: true
});
$master.jqGrid("navGrid", "#grid1_toppager",
    { add: false, edit: false, del: false, search: false,
        refreshstate: "current"});

$details.jqGrid({
    datatype: "local",
    idPrefix: "d_", // to be sure that no id duplicates with master grid exist
    url: "GetLetterInformationHandler.ashx",
    postData: {
        CurrentUser: 1157,
        TabName: "relatedLetters",
        IndCode: function () {
            var selRowId = $master.jqGrid("getGridParam", "selrow");

            return selRowId === null ? "" :
                $master.jqGrid("getCell", selRowId, "PctIndCode");
        },
        IndSerial: function () {
            var selRowId = $master.jqGrid("getGridParam", "selrow");

            return selRowId === null ? "" :
                $master.jqGrid("getCell", selRowId, "PctIndNum");
        }
    }
    ...
);