jqgrid navgrid not working inside tabs

Question

I have view showing a list of documents using jqgrid. While I click on the document title in the grid, I created a pop up with partial view and in this partial view up am using Kendo tabs. In one of the tab am using a partial view to load a jqgrid which shows all the Document logs and in this grid my navgrid is not working. When i click on the next button for navigating to next page, it is actually navigating the main page where I have the list of documents. To avoid confusion I used different 'id' for the navgrid in the partial view, but then it showed no next and previous button at all. Could anyone guide me how to add paging to the partial view while not affecting the parent view.

Below is jqgrid code of the main View:

  $.ajax(
    {
        type: "GET",
        url: "@Url.Action("GetDocumentFileList", "Document")",
        data: "",
        dataType: "json",
        success: function (data) {
            if (data == "SessionTimeOut")
                window.location.href = '@Url.Action("SessionTimeOut", "Error")';
            var page = data.Page;
            var rows = data.Rows;
            var colModel = eval(data.Columns);
            var colNames = eval(data.ColumnsTitle);
            var $grid = $("#datagrid");
            $grid.jqGrid({
                url: "@Url.Action("GetDocumentFileList", "Document")",
                datatype: griddataType,
                datastr: rows,
                colNames: colNames,
                colModel: colModel,
                gridComplete: initGrid,
                rowList: [25, 50, 75, 100],
                ignoreCase: true,
                width: null,
                shrinkToFit: true,
                multiselect: true,
                multiboxonly: false,
                pager: '#navGrid',
                sortname: 'DocumentRegisterID',
                sortorder: "desc",
                scrollerbar: true,
                viewrecords: true,
                rowNum: 25,
                autowidth: true,
                ondblClickRow: function (DocumentRegisterID) {
                    if (DocumentRegisterID && DocumentRegisterID !== lastsel2) {
                        $grid.jqGrid('restoreRow', lastsel2);
                        $grid.jqGrid('editRow', DocumentRegisterID, true, null, successFuncStandardGrid);
                        lastsel2 = DocumentRegisterID;
                    }
                },
                editurl: "@Url.Action("EditDocumentNo", "Document")",
                hoverrows: true,
                onSelectRow: function () {
                    return false;
                },

here is the jqgrid code for the partial view used in the pop up in main view :

$.ajax(
{
    type: "GET",
    url: "@Url.Action("DocHistoryEventLog", "Document")",
    data: '',
    success: function (data) {
        var page = data.Page;
        var rows = data.Rows;
        var $grid = $("#dataeventgrid");
        $grid.jqGrid({
            url: "@Url.Action("DocumentRegisterHistoryEventLogList", "Document", new { id = @docId })",
            datatype: "json",
            datastr: rows,
            colNames: ['DocumentRegisterEventLogID', 'Event Type', 'Description', 'Revision', 'Version', 'Log By', 'Log Date', 'Organization Name', 'Document Owner Organization'],
            colModel: [
               { name: 'DocumentRegisterEventLogID', index: 'DocumentRegisterEventLogID', key: true, hidden: true },
                { name: 'EventType', index: 'EventType', width: "20%", resizable: true },
                { name: 'EventDescription', index: 'EventDescription', sorttype: 'text', width: "20%", resizable: true },
                { name: 'Revision', index: 'Revision', width: "15%", sorttype: 'text', resizable: true },
                { name: 'DocVersion', index: 'DocVersion', width: "20%", resizable: true },
                { name: 'LogBy', index: 'LogBy', sorttype: 'text', width: "20%", resizable: true },
                {
                    name: 'StrLogDate', index: 'StrLogDate', sorttype: 'text', width: "25%", resizable: true,
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker },
                },
                { name: 'OrganizationName', index: 'OrganizationName', sorttype: 'text', width: "20%", resizable: true },
                { name: 'DocumetOwnerOrganizationName', index: 'DocumetOwnerOrganizationName', width: "20%", sorttype: 'text', resizable: true },
            ],
            rowList: [15, 30, 45, 100],
            loadonce: false,
            shrinkToFit: true,
            ignoreCase: true,
            pager: '#navLogGrid',
            autoencode: true,
            sortname: 'DocumentRegisterEventLogID',
            sortorder: "desc",
            viewrecords: true,
            rowNum: 15,
            width: 850,
            height:270,
            gridview: true,
            height: "auto",
            scrollerbar: true,
            loadComplete: function () {
                highlightFilteredData.call(this);

            },
            loadError: function (jqXHR, textStatus, errorThrown) {
                alert('HTTP status code: ' + jqXHR.status + '\n' +
                      'textStatus: ' + textStatus + '\n' +
                      'errorThrown: ' + errorThrown);
                alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
            }
        });

        $grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", stype: 'select' });
        $grid.jqGrid("navGrid", "#navLogGrid", { add: false, edit: false, del: false, search: false, refresh: true });
        $grid.parents('div.ui-jqgrid-bdiv').css("max-height", '270px');

Answer 1

Setting the property loadonce:true in my partial view solved my problem. Thanks