Question

I want to display JQGrid with all column headers but without any data rows when the page loads.

Based upon user selection through autocomplete i want to populate the JqGrid with data.

The problem is that each time during pageload the grid is automatically populated.

How can i get around this ?

This is how i am using the grid with VS2008 MVC2

jQuery('#jgrid').jqGrid({
    autowidth: true,
    altRows: true,
    altclass: 'grdAltRwClr',
    datatype: 'xml',
    forceFit: true,
    gridview: true,
    height: 290,
    mtype: 'post',
    rowList: [10, 20, 30],
    rowNum: 10,
    pager: '#pager',
    pagerpos: 'right',
    recordpos: 'left',
    rownumbers: false,
    scrollrows: false,
    sortname: 'roledtlid',
    toolbar: [true, "top"],
    url: rootPath + 'RoleDetail/JGridData',
    beforeSelectRow: function(rowid, e) { return false; },
    gridComplete: function() { GridComplete() },
    colModel: [
          { name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 6, index: 'act' }
        , { name: 'roledtlid', label: 'R.Detail id', width: 15, index: 'roledtlid' }
        , { name: 'roleid', label: 'Role id', width: 10, index: 'roleid' }
        , { name: 'rolename', label: 'Role Name', width: 25, index: 'rolename' }
        , { name: 'pageid', label: 'Page ID', width: 10, index: 'pageid' }
        , { name: 'pgname', label: 'Page Name', width: 30, index: 'pgname' }
        , { name: 'canadd', label: 'Add', width: 10, index: 'canadd' }
        , { name: 'canedit', label: 'Edit', width: 10, index: 'canedit' }
        , { name: 'candel', label: 'Delete', width: 10, index: 'candel' }
        , { name: 'canview', label: 'View', width: 10, index: 'canview' }
         ]
});

Thanks

Answer 1

Don’t provide a url. Instead set your datatype to “local” and use code similar to the following:

    var mySearchData = // Get your search data...

    $.post('@Url.Action("Getars")', mySearchData, function(gridData) {
        var rowIds = $('#carGrid').jqGrid('getDataIDs');

        for (var i = 0, len = rowIds.length; i < len; i++) {
            var currRow = rowIds[i];
            $('#carGrid').jqGrid('delRowData', currRow);
        }

        $('#carGrid').jqGrid('setGridParam', { data: gridData }).trigger('reloadGrid');
    }).error(function (jqXHR, textStatus) {
        app.showErrorAlert(jqXHR.responseText);
    });
}