jQgrid's gridComplete event is firing but loadComplete is not firing..... why?

Question

In my ASP.NET project I am integrating jQgrid to show data. My Problem is loadComplete event is not firing. My entire jQgrid code is as follows:

function getData(jqGridParams) 
    {
        var sortcookieval = $.cookie("ItemGridSortInfo");
        var sname = "";
        var sorder = "";
        if (sortcookieval != null) 
        {
            var sortInfo = sortInfoFromCookie("ItemGridSortInfo");
            sname = sortInfo.sortname;
            sorder = sortInfo.sortorder;
        }
        else 
        {
            sname = "";
            sorder = "asc";
        }
        var params = new Object();
        params.pageIndex = jqGridParams.page;
        params.pageSize = jqGridParams.rows;
        params.sortIndex = sname; //jqGridParams.sidx;  
        params.sortDirection = sorder;  //jqGridParams.sord;
        params._search = jqGridParams._search;
        if (jqGridParams.filters === undefined)
            params.filters = null;
        else
            params.filters = jqGridParams.filters;

        $.ajax({
            url: 'WSAjax.asmx/GetDataForGrid',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(params),
            success: function (data, textStatus) 
            {
                if (textStatus == "success") 
                {
                    var grid = $("#ItemGrid")[0];
                    grid.addJSONData(data.d);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) 
            {
                alert(textStatus, errorThrown);
            }
        });
    }

    function saveSortInfoToCookie(name, grid)
    {
        var sortInfo = new Object();
        sortInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
        sortInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
        //$('#Hidden').val(JSON.stringify(gridInfo));
        //alert($('#Hidden').val());
        $.cookie(name, JSON.stringify(sortInfo), {expires: 5});
    }

    function sortInfoFromCookie(name) 
    {
        var c = $.cookie(name);
        if (c === null)
            return;
        return $.parseJSON(c);
    }

    $(document).ready(function () {
        var oItemGrid = $("#ItemGrid");
        oItemGrid.jqGrid({
            datatype:
                function (jqGridParams) {
                    getData(jqGridParams);
                },
            colNames: ['Type', 'Name', 'Desc'],
            colModel: [
                { name: 'Type', index: 'Type', width: 40 },
                { name: 'Name', index: 'Name', width: 40 },
                { name: 'Desc', index: 'Desc', width: 40, sortable: false}],
            autowidth: true,
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            viewrecords: true,
            gridview: true,
            autoencode: true,
            ignoreCase: true,
            caption: 'Remember Sorting and Filtering Functionality',
            pager: '#IGPager',
            onSortCol: function (colModel, colName, sortOrder) {
                saveSortInfoToCookie("ItemGridSortInfo", $("#ItemGrid"));
                var storeval = $.cookie("ItemGridSortInfo");
                alert("Saving sort info in cookie: " + storeval);
            },
            gridComplete: function () {
                var prvData = $.cookie("ItemGridSortInfo");
                alert("Reading saved sort info from cookie : " + prvData);

                var pageno = $.cookie("ItemGridPageInfo");
                alert("Reading saved page no. from cookie:" + pageno);
            },
            loadComplete: function (data) {
                if(data != null)
                {
                    alert("Inside loadComplete..");
                }
            },
            //loadonce: true
        }).jqGrid('navGrid', '#IGPager', { edit: false, add: false, del: false }, {}, {}, {}, {}, {});
    });

and if possible please tell me difference between gridComplete and loadComplete according to my scenario....

score 2 · Accepted Answer · answered Aug 11 '13 at 02:51

2

The problem is you set datatype as a function (custom defined function for retrieving data) instead of local. If you use a function, then you should call loadComplete in your own implementation.

So if you change it to other type like local, the loadComplete will be handled automatically by jqGrid. I created a demo for you.

Demo

answered Aug 11 '13 at 02:51

zs2020

53,766
29
154
219

1

+1 from me for pointing to the correct reason of the problem. One should **never** use `datatype` as function if one uses `$.ajax` internally. one should use `datatype: "json", url: "WSAjax.asmx/GetDataForGrid", mtype: "POST", ajaxGridOptions: { contentType: "application/json", serializeRowData: function (data) { return JSON.stringify(data); } }, prmNames: {page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection"}`. – Oleg Aug 11 '13 at 12:09
One can use `beforeRequest` to save additional information in the cookie (in my opinion the usage of `localStorage` like described in [the answer](http://stackoverflow.com/a/8436273/315935) is better as the usage of cookie). If one *really* need to use `datatype` as function then one have to call many callbacks like `loadBeforeSend`, `loadComplete` and `loadError` from `getData` function. See [the answer](http://stackoverflow.com/a/7455157/315935) for the corresponding code example. – Oleg Aug 11 '13 at 12:10
@Oleg : In prmNames you have not specified how to pass filters parameters. I checked documentation for filters but they doesn't mention about this. – Rahul More Aug 12 '13 at 10:29
@Rahul: The name of parameter which you use is `filters` which is the standard name. You can use `prmNames` *to change* the names of parameters. So you don't need to specify and property in `prmNames` to have `filters` sent to the server. The format of the value of `filters` parameter are described [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:advanced_searching#options). – Oleg Aug 12 '13 at 11:02
@Olag: I made changes in my code according to your first suggestion... Its making call to web service everything is working perfectly but problem is its not showing data inside grid. I already posted a question [here](http://stackoverflow.com/questions/18187265/my-jqgrid-is-not-displaying-json-data). what shold I do to resolve this problem?? – Rahul More Aug 12 '13 at 13:49

jQgrid's gridComplete event is firing but loadComplete is not firing..... why?

1 Answers1