Pass Id to Subgrid of Jqgrid

Question

In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.

 <script type="text/javascript">
    $(function () {

        $('#jqgrid').jqGrid({

            url: 'Sales/GetAllSalesOrders/',

            datatype: 'json',
            mtype: 'GET',
            //columns names
            colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
            //columns model
            colModel: [
                        { name: 'InvoiceId', index: 'InvoiceId' },
                        { name: 'CustomerId', index: 'CustomerId',align:'center' },
                        { name: 'SubTotal', index: 'SubTotal', align: 'right' },
                        { name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
                        { name: 'Vat', index: 'Vat', align: 'right' },
                        { name: 'Nbt', index: 'Nbt', align: 'right' },
                        //{ name: 'Total', index: 'Total', align: 'left' },
                        { name: 'NetAmount', index: 'NetAmount', align: 'right' },
                        { name: 'Balance', index: 'Balance', align: 'right' }
            ],

            pager: '#jqgrid',
            rowNum: 10,
            sortname: 'InvoiceId',
            sortorder: 'asc',
            viewrecords: true,
            width: 'auto',
            height: 'auto',
            gridview: true,
            rowNum: 50,
            rowTotal: 200,
            rowList: [20, 30, 50, 100],
            rownumbers: false,
            rownumWidth: 40,
            loadonce: true,
            subGrid: true,
            subgridtype: "json",
            //subrid model
            subGridModel: [{
                //subgrid columns names
                // name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
                name: ['InvoiceItemId', 'Quantity','Amount'],
                width: [100, 100,100],
                align: ['left', 'right','right'],

                //postData: { id: 22 }
            }],
            //url from which subgrid data should be requested
            subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'

        });

My Controller accept Id,

 [HttpGet]
    public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
    {
    //Some code here
    }

Answer 1

You can use subGridBeforeExpand to set new value of subGridUrl : $(this).jqGrid("setGridParam", {subGridUrl: newValue}); .

Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid . Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.

Answer 2

In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:

...
prmNames: {
    subgridid: "InvoiceId",
}
...

Therefore, your subgrid url will be

/Sales/GetSalesItemsByInvoiceId?InvoiceId=

instead of

/Sales/GetSalesItemsByInvoiceId?id=

Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):

...
jsonReader: {
   id: 'InvoiceId'
}
...

So your final code will be like this:

<script type="text/javascript">
$(function () {

    $('#jqgrid').jqGrid({

        url: 'Sales/GetAllSalesOrders/',

        datatype: 'json',
        mtype: 'GET',
        //columns names
        colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
        //columns model
        colModel: [
                    { name: 'InvoiceId', index: 'InvoiceId' },
                    { name: 'CustomerId', index: 'CustomerId',align:'center' },
                    { name: 'SubTotal', index: 'SubTotal', align: 'right' },
                    { name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
                    { name: 'Vat', index: 'Vat', align: 'right' },
                    { name: 'Nbt', index: 'Nbt', align: 'right' },
                    //{ name: 'Total', index: 'Total', align: 'left' },
                    { name: 'NetAmount', index: 'NetAmount', align: 'right' },
                    { name: 'Balance', index: 'Balance', align: 'right' }
        ],

        pager: '#jqgrid',
        rowNum: 10,
        sortname: 'InvoiceId',
        sortorder: 'asc',
        viewrecords: true,
        width: 'auto',
        height: 'auto',
        gridview: true,
        rowNum: 50,
        rowTotal: 200,
        rowList: [20, 30, 50, 100],
        rownumbers: false,
        rownumWidth: 40,
        loadonce: true,
        subGrid: true,
        subgridtype: "json",
        //subrid model
        subGridModel: [{
            //subgrid columns names
            // name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
            name: ['InvoiceItemId', 'Quantity','Amount'],
            width: [100, 100,100],
            align: ['left', 'right','right'],

            //postData: { id: 22 }
        }],
        //url from which subgrid data should be requested
        subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
        prmNames: {
          subgridid: "InvoiceId",
        },
        jsonReader: {
          id: 'InvoiceId'
        }
    });