Jqgrid: Load data after Grid load?

Question

I am using jqgrid 4.0 .The grid is loaded on page load using 'local' datatype , loadonce:'true' and I don't want to use pagination. Since the data that is to be loaded is huge, it takes lot of time to get loaded. How can I

load the grid only first with headers, displaying a load text as 'loading....' and then load the data? Right now, both the grid and data loads together and page doesnt appear until this is complete.
Load the data faster in grid?

Below is my code snippet where 'data' is the json encoded array formed server side.

<script type="text/javascript">
    jQuery("#list9").jqGrid({
        data: data,
        datatype: "local", 
        colNames:[...],
        colModel:[...],
        sortname: 'fld_name',
        rowNum: '-1',
        loadonce:true, 
        mtype: "GET",
        gridview: true,
        viewrecords: true,
        sortorder: "asc",
        pager: '#pager9',
        rownumbers: true,
        multiselect: false,
        width: '100%',
        pgbuttons:false,
                pgtext:'',
        loadtext: 'loading....',
        ignoreCase: true
        });

jQuery("#list9").jqGrid('filterToolbar', {stringResult: true,searchOnEnter : false}); 
$('.ui-widget-header').css("background", "#7B9FBC");
$('.ui-jqgrid-sortable').css("text-align", "left");


</script>

Walter Stabosz Walter Stabosz · Accepted Answer · 2012-01-04T14:47:05

What I do is:

First, render the grid without any data.

var grid = $('#myGrid'); 
grid.jqGrid({   
    data: [],
    datatype: "local",
    colModel: [ ...

Then, add the data to the grid using addRowData.

var grid = $('#myGrid');
grid.jqGrid('addRowData', 'ContactID', newRowData, 'first');

It sounds like you have your data already in memory when you build the grid, and it's just taking a long time to render the grid. This might be because of all the DOM objects being created when rendering the grid. There isn't much you can do about that other than paging, or decrease the complexity of your cells if you are using heavy formatting.

Jqgrid: Load data after Grid load?

1 Answers