MVC3 jqGrid subgrid using subGridrowExpanded

Question

I'm developing an MVC3/razor application, and I am trying to use the subGridRowExpanded to nest a jqGrid inside another (so I can use the formatter amongst other things), how do i pass the id value Of the parent Grid to the Child grid?

The below code runs the main grid, and populates it with Data from the "Search/Customers" URL, but I do not know how to select the record I've Selected in the 'Search/BankLinks' URL controller

Can anyone tell me how to do this?

Thanks in advance Andrew.

My Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>@ViewBag.Message</h2>
<div id="content">
    <div id="content-left">
        @Html.Partial("SearchPanel")
    </div>
    <div id="content-main">
        <table id="jpgCustomers" cellpadding="0" cellspacing="0"></table>
        <div id="jpgpCustomers" style="text-align:center;"></div>
    </div>
</div>
@section JavaScript
{
<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#jpgCustomers').jqGrid({
            //url from wich data should be requested
            url: '@Url.Action("Customers")',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Name', 'FullName', 'SFTP Enabled', 'IsTranbase'],
            colModel: [
                { name: 'LogonName', index: 'LogonName', align: 'left' },
                { name: 'FullName', index: 'FullName', align: 'left' },
                { name: 'Enabled', index: 'Enabled', align: 'left' },
                { name: 'IsTran', index: 'IsTranbase', align: 'left' }
            ],
            pager: $('#jpgpCustomers'),
            rowNum: 10,
            sortname: 'FullName',
            sortorder: 'asc',
            viewrecords: true,
            height: '100%',
            subGrid: true,
            subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id, pager_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'class='scroll'></table><div id='"+pager_id+"'class='scroll'></div>");
                $("#"+subgrid_table_id).jqGrid({
                    url: '@Url.Action("BankLinks")',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Bank', 'Folder', 'Enabled'],
                    colModel:[
                        {name:"Bank",index:"Bank",width:80,key:true},
                        {name:"Folder",index:"Folder",width:130},
                        {name:"Enabled",index:"Enabled",width:70,align:"left"}
                    ],
                    rowNum:20,
                    pager: pager_id,
                    sortname: 'Bank',
                    sortorder: "asc",
                    viewrecords: true,
                    height: '100%'
                });
                $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
            },
        });
    });
</script>
}

My Controller Actions:

Customers

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customers(JqGridRequest request)
{
    ISession session = NHibernateHelper.GetCurrentSession();
    IEnumerable<Customer> customers = session.QueryOver<Customer>().List().Skip<Customer>(0).Take<Customer>(request.RecordsCount);

    int totalRecords = customers.Count();

    //Prepare JqGridData instance
    JqGridResponse response = new JqGridResponse()
    {
        //Total pages count
        TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
        //Page number
        PageIndex = request.PageIndex,
        //Total records count
        TotalRecordsCount = totalRecords
    };
    //Table with rows data
    foreach (Customer customer in customers)
    {
        response.Records.Add(new JqGridRecord(Convert.ToString(customer.Id), new List<object>()
        {
            customer.FtpDetails.LogonName,
            customer.FtpDetails.FullName,
            customer.FtpDetails.Enabled,
            customer.IsTran
        }));
    }

    //Return data as json
    return new JqGridJsonResult() { Data = response };
}

BankLinks

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult BankLinks(JqGridRequest request)
{
    ISession session = NHibernateHelper.GetCurrentSession();

    //IN THIS LINE I HAVE HARDCODED value 14 - I need this value to be passed from the 
    //Parent Grid!
    Customer customer = session.Get<Customer>(14);

    int totalRecords = customer.Banks.Count();

    //Prepare JqGridData instance
    JqGridResponse response = new JqGridResponse()
    {
        //Total pages count
        TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
        //Page number
        PageIndex = request.PageIndex,
        //Total records count
        TotalRecordsCount = totalRecords
    };

    foreach (Bank bank in customer.Banks.ToList<Bank>())
    {
        CustomerBank bankLink = session.QueryOver<CustomerBank>().Where(x => x.BankId == bank.Id).Where(y => y.CustomerId == customer.Id).List<CustomerBank>().FirstOrDefault();

        response.Records.Add(new JqGridRecord(null, new List<object>()
        {
            bank.BankCode,
            bank.Folder,
            bankLink.Enabled 
        }));
    }
     return new JqGridJsonResult() { Data = response };
 }

Answer 1

First you should modify your subGridRowExpanded callback like this:

subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id, pager_id;
    subgrid_table_id = subgrid_id + '_t';
    pager_id = "p_"+subgrid_table_id;
    $('#' + subgrid_id).html('<table id="' + subgrid_table_id + '" class="scroll"></table><div id="' + pager_id + '" class="scroll"></div>');
    $('#' + subgrid_table_id).jqGrid({
        url: encodeURI('@Url.Action("BankLinks")' + '?id=' + row_id),
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Bank', 'Folder', 'Enabled'],
        colModel: [
            {name: 'Bank', index: 'Bank', width:80, key:true },
            {name: 'Folder', index:'Folder', width:130 },
            {name: 'Enabled', index: 'Enabled', width:70, align: 'left' }
        ],
        rowNum: 20,
        pager: pager_id,
        sortname: 'Bank',
        sortorder: 'asc',
        viewrecords: true,
        height: '100%'
    });
    $('#' + subgrid_table_id).jqGrid('navGrid', '#' + pager_id, {edit: false, add: false, del: false })
}

Notice the usage of encodeURI in order to make sure that the produced URL is valid.

Now you can modify your action method like this:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult BankLinks(int id, JqGridRequest request)
{
    //You can sue id parameter to get the data for selected client.
    ...
}

This should do the trick.