Question

I have 2 Grids on my HTML page.
When I click a row in one grid, it needs to load data into the other based on the selected row.

Therefore I need to send the rowId as an extra parameter for the second grid.. Can’t figure out how..

(I’d rather not like to use the subgrid functionality)

Answer 1

You can find an example of this scenario on http://trirand.com/blog/jqgrid/jqgrid.html if you choose “Advanced” and then “Master Detail”. I include below a small variation of the code.

Let us we have two grids on the HTML page: one “master” grid and another “details” grid, which needs to load data based on the row selected into the master grid. Let us both grids must fill the data from the server which send back the data in the JSON format. We suppose , that we use single row selection (no multiselect: true is defined) in the master grid.

Here is the code template

var detailsTitle = 'Details';
var grid = jQuery('#master').jqGrid({ // ... some parameters
    url: masaterUrl,
    datatype: 'json',
    colModel: [ // ... some column definitions
        { name: 'Name', width: 120 }
    ],
    onSelectRow: function(id) {
        var selName = grid.getCell(id, 'Name');
        gridDetails.setCaption(detailsTitle + ' for "' + selName + '"');
        gridDetails.setGridParam({
            //url: urlGetDetail + '/' + encodeURIComponent(id),
            //url: urlGetDetail + '?' + $.param( { userId: id });
            postData: { userId: id },
            page: 1,
            datatype: 'json' }).trigger('reloadGrid');
    }
}).navGrid('#pager', {}, {}, {}, {
    afterSubmit: function(response, postdata) {
        gridDetails.setCaption(detailsTitle);
        gridDetails.setGridParam({ datatype: 'local',
                                   page: 1 }).trigger('reloadGrid');
        return [true, ''];
    }
});

var gridDetails = jQuery('#detail').jqGrid({ // ...
    caption: detailsTitle,
    url: urlDetail,
    //postData: { userId: function() { return grid.getGridParam('selrow'); } },
    datatype: 'local'
});

Now some comments to the code. At the beginning no rows will be selected in the master grid. So we set datatype: 'local' as a parameter of details grid to deny and data loading.

If a row in the master grid will be selected we set the title (the caption) of the details grid, change datatype of details grid to 'json' and set page: 1. Resetting of the page parameter is important because it will be send to the server as additional parameter. If at the last selection the user choosed another page before and for the new selection there are not so many datails rows as before the details grid could be empty. To fix the problem we should set always page to 1.

Now the main work: sending the id of the master grid as a parameter of the server request for the details grid. We have some options here:

• we can append the url of details grid with a string like '?userId='+id. To do this more carefully we should take in consideration that id can has some special characters. So to be sure we should use '?userId='+encodeURIComponent(id) instead. The function jQuery.param do the same in more readable form. So we can use '?'+jQuery.param({userId:id}) instead. I recommend to use the way if the url of the details grid should be in the REST format (like “blabla/id”). In this case the setting of url of the details grid to urlDetail+'/'+encodeURIComponent(id) is probably the best way.
• we can set parameter postData:{userId:id}. It follows to the same as '?'+jQuery.param({userId:id}) if we use HTTP GET for the requests to the server. The advantage of the way is that we use also HTTP POST. Then the parameters will be posted in the body instead of appended to the URL. So the usage of postData has a small advantage.
• we can remove the code from onSelectRow event of the master grid and include in the the detail grid an additional parameter postData as a function (see commented line). The way will work very good with small exceptions. For example, it will be difficult for us to clear the details grid if the selected row in the master grid will be deleted. In some other situations we have also less flexibility. So I wanted only mention this possibility, but I included it only as a comment (see How to filter the jqGrid data NOT using the built in search/filter box if you have interest to this way).