Question

I am trying Master Detail scenario in ASP.NET MVC 3 (default view engine) .

I was able to go through the following code at http://www.trirand.com/blog/jqgrid/jqgrid.html and get master detail working. The problem is that when I select any row in details
the first row seems to get selected / unselected
clicking on link to find selected id’s return ,null,null,null,null,nul

Have anyone of you experienced the same.

if you can point me to working ASP.NET MVC example with JQGrid Master Details , it will be much appreciated.

Regards,

Mar

Edit – Code

1- View Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/default.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Orders Available
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/themes/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="scriptContent" runat="server">
    <script type="text/javascript">
        jQuery(document).ready(function () {

            jQuery("#list10").jqGrid({
                url: '/order/list/',
                datatype: "json",
                mtype: 'post',
                colNames: ['PurchaseOrder', 'SalesOrder', 'OrderDate', 'Supplier', 'Status', "Details"],
                colModel: [
      { name: 'PurchaseOrder', index: 'PurchaseOrder', width: 100, align: 'left' },
                            { name: 'SalesOrder', index: 'SalesOrder', width: 100, align: 'left' },
                            { name: 'OrderDate', index: 'OrderDate', width: 75, align: 'left' },
                            { name: 'Supplier', index: 'Supplier', width: 150, align: 'left' },
                            { name: 'Status', index: 'Status', width: 50, align: 'left' },                          
                            { name: 'Details', index: 'Details', width: 50, align: 'left' }
    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager10',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                multiselect: false,
                caption: "Invoice Header",
                onSelectRow: function (ids) {
                    if (ids == null) {
                        ids = 0;
                        if (jQuery("#list10_d").jqGrid('getGridParam', 'records') > 0) {
                            jQuery("#list10_d").jqGrid('setGridParam', { url: "/order/detail/id=" + ids, page: 1 });
                            jQuery("#list10_d").jqGrid('setCaption', "Invoice Detail: " + ids)
                .trigger('reloadGrid');
                        }
                    } else {
                        jQuery("#list10_d").jqGrid('setGridParam', { url: "/order/detail/id=" + ids, page: 1 });
                        jQuery("#list10_d").jqGrid('setCaption', "Invoice Detail: " + ids)
            .trigger('reloadGrid');
                    }
                }
            });
            jQuery("#list10").jqGrid('navGrid', '#pager10', { add: false, edit: false, del: false });
            jQuery("#list10_d").jqGrid({
                height: 100,
                url: "/order/detail/",
                datatype: "json",
                colNames: ['Stock Number', 'Description', 'Available', 'Required'],
                colModel: [
        { name: 'PartNumber', index: 'StockNumber', width: 100, align: 'left' },
                            { name: 'Description', index: 'Description', width: 200, align: 'left' },
                            { name: 'Available', index: 'Available', width: 75, align: 'left' },
                            { name: 'Required', index: 'Required', width: 75, align: 'left' }
    ],
                rowNum: 5,
                rowList: [5, 10, 20],
                pager: '#pager10_d',
                sortname: 'item',
                viewrecords: true,
                sortorder: "asc",
                multiselect: true,
                caption: "Invoice Detail",
                beforeSelectRow: function(rowid, e) { return true; }

            }).navGrid('#pager10_d', { add: false, edit: false, del: false });
            jQuery("#ms1").click(function () {
                var s;
                s = jQuery("#list10_d").jqGrid('getGridParam', 'selarrrow');
                alert(s);
            });

        });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="mainContent" runat="server">
    <div class="orderSelSum">
        <h3>
            Summary</h3>
        <p>
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
            in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
            Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
            up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
            and going through the cites of the word in classical literature, discovered the
            undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
            Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
            This book is a treatise on the theory of ethics, very popular during the Renaissance.
            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
            in section 1.10.32</p>
    </div>
    <div id="orderMain">
        <table id="list10">
        </table>
        <div id="pager10">
        </div>
        <br />
        Invoice Detail
        <table id="list10_d">
        </table>
        <div id="pager10_d">
        </div>
        <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
    </div>
</asp:Content>

2- JSon result

a) For Master Table

{"total":10,"page":1,"records":4,"rows":[{"id":"4cf2c07d-1f13-4add-8bf9-3e7bca441a69","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"54f3b266-dd14-4137-ab76-6d4a1fd7fe7c","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"ab63a5ae-1f00-43ed-a50e-d8fb60ff2df2","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"484c0e05-80c6-4259-8a29-ca6be83037e4","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]}]}

b) Details

{"rows":[{"id":null,"cell":["PART A","Apple ","10","0"]},{"id":null,"cell":["PART B","Orange","12","0"]},{"id":null,"cell":["PART C","Banana","8","0"]},{"id":null,"cell":["PART D","Bread","10","0"]},{"id":null,"cell":["Part E","Jam","9","0"]}]}

Some Images

Update 1
found that details json contains null for ID field. I will correct that soon.

Answer 1

The only problem which you have to take in consideration in Master/Detail scenario is the choose of ids in both tables. It is important to understand, that jqGrid use the id returned from the server as ids of <tr> elements of the grid. So if you use for both table the same ids (duplicates) you will have conflicts.

It you do still have problem with the implementation of Master/Detail scenario you should append your question with the code example and some test data. One can save the test JSON data to a text files to simulate the server responses so no server code is required.