Question

I have a jqGrid on which clicking of a row should render a partial view below the jqGrid, but it doesn’t happen. I am doing something as shown below:

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/json2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/CookieManagement.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jQGridState.js")"></script>
<link href="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $('#Listing').jqGrid({
                url: '@Url.Action("Grid", "Name")',
                datatype: "json",
                edit: false,
                add: false,
                del: false,
                height: 330,
                mtype: 'GET',
                colNames: ['ID','Name'],
                jsonReader: {
                    root: "Clients",
                    page: "CurrentPage",
                    total: "TotalPages",
                    records: "TotalRecords",
                    repeatitems: false,
                    cell: "",
                    id: "0"
                },
                colModel: [
                    { name: 'Id', index: 'Id', width: 65, align: 'center', sorttype: "int" },
                    { name: '@NameMap.STATUS_COLUMN', index: '@NameMap.STATUS_COLUMN', width: 140, align: 'left', sortable: true }],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 15, 20],
                sortname: 'Id',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,                    
                onSelectRow: function (id) {
                        $.ajax({
                                url: '@Url.Action("Details","Name")',
                                data: { 'Id': id },
                                success: function (detailsHtml) {
                                         $('#NameDetails').html(detailsHtml);
                                         },
                                dataType: 'html'
                                });
                        },
                loadComplete: function () {
                              $('#NameDetails').html("");
                             }  
            });
        });
    });
</script>

Here Details and Grid are the controller action in the Name Controller. Details which is hooked up to onSelectRow returns a View and $(‘#NameDetails’) is the id of the last div in this page.

My problem is that I am not able to see the details view appearing even though the values inside it are properly getting populated, is there something wrong in my OnSelectRow or do i need to include any other javascript file??

Answer 1

Well that was foolish, but actually I did a spelling mistake in an id called “NameDetails” as “NameDetalis” and that was the reason that my view was not getting rendered.