Basic Master/Detail code sample with JGrid

For this sample you need json calls for master and detail. still good example for calling data.

Don’t forget adding script headers.

@page
@model BPMPredev1UI.Models.BPTemplate

@{
    ViewData["Title"] = "Home page";
}




<div>
    <table id="myGrid"></table>
    <div id="myPager"></div>
</div>
<div id="detailsgrid"></div>

<div id="notification"></div>




@section scripts{
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
    <script src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-en.js"></script>
    <script src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
    <link href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />

    <style type="text/css">

        .ui-jqgrid .ui-widget-header {
            background - color: #232323;
            background-image: none;
            color: white;
        }

        .ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
            background - color: #FFCC66;
            background-image: none;
            color: #336699;
            height: 30px;
            font-weight: bold;
        }
    </style>
    <script>
        $(function () {
            $("#myGrid").jqGrid({
                url: 'http://localhost:62174/GetBPTJson',
                datatype: 'json',
                mytype: 'get',
                colNames: ['id', 'name'],
                colModel: [
                    { name: 'BPTemplateId', width: '35px' },
                    { name: 'Name', width: '160px' }
                ],
                pager: $('#myPager'),
                rowNum: 5,
                sortname: 'ID',
                gridview: true,
                sortorder: 'desc',
                loadonce: false,
                rowList: [5, 10, 20, 50],
                width: 600,
                height: 110,
                viewrecords: true,
                emptyrecords: 'No records',
                jsonReader:
                {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },
                autowidth: true,
                onSelectRow: function (rowid, selected) {
                    var gridRow = $(this).getRowData(rowid);
                    var bptId = gridRow["BPTemplateId"];

                    lastsel = rowid;
                    showdetail(bptId);


                    // $('#myGridDetail').editRow(rowid, true);
                }, // use the onSelectRow that is triggered on row click to show a details grid
                onSortCol: clearSelection,
                onPaging: clearSelection,
                caption: ' JQ Grid'
            });




            function refreshGrid($grid, results) {
                $grid.jqGrid('clearGridData')
                    .jqGrid('setGridParam', { data: results })
                    .trigger('reloadGrid', [{ page: 1 }]);
            }



            function clearSelection() {
                jQuery("#jqGridDetails").jqGrid('setGridParam', { url: "empty.json", datatype: 'json' }); // the last setting is for demo purpose only
                jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid:: none');
                jQuery("#jqGridDetails").trigger("reloadGrid");

            }

            function showdetail(id) {

                // Put artistList element and JSON file location into a variable

                var url = "http://localhost:62174/GetBPTDetailJson?id=" + id;

                // Get the JSON file
                $.getJSON(url, function (data) {


                    var tbl = $('<table />').attr("id", "myGridDetail1")
                        .attr("class", "w3 - table w3 - striped w3 - border ");
                    $("#detailsgrid").empty();
                    $("#detailsgrid").append(tbl);
                    tbl.append(`<thead><tr>
                            <th>Template Id</th>
                            <th>Id</th>
                            <th>StepId</th>
                            <th>Name</th>
                    </tr></thead>`);
                    for (i in data.rows) {
                        tbl.append(`<tr>
                                        <td>${data.rows[i].BPTemplateId}</td>
                                        <td>${data.rows[i].BPTemplateDetailId}</td>
                                        <td>${data.rows[i].StepId}</td>
                                        <td>${data.rows[i].Name}</td>
                                  </tr>`);
                    }

                });
            }
        });
      

    </script>
}