jxqGrid not displaying data in IE

[LuisParticipant]

Hello everyone,
I’m struggling with this and maybe the solution is simple. I want to display an empty jqxGrid or at least the “Loading…” icon while waiting for the data. The following solution works fine in Chrome but not in IE.
– In Chrome the first time it displays “Loading…” with a blank background until the data arrives and the grid is rendered. I have a button in the form to refresh the grid (to display more or less info) which works fine. Once the grid has been displayed the first time, consecutives times “Loading…’ icon is displayed over the grid until it’s refreshed.
– In IE first time there is no “Loading…” icon and grid gets rendered but with no data (even though dev tools shows API call was done OK an has data). Consecutives times it works fine (like Chrome). It looks like first time in IE grid is not waiting for the response.

I cannot provide an online example because of the API call. On $(document).ready I’m calling this function (I removed obvious code). This function is also called every time the user clicks on the button.

function GetList() {
    var source = {
        type: "POST",
        data: prevalData,
        datafields: [
            { name: 'CLAIM_LOG_ID', type: 'string' },
            ...
            { name: 'BANKING_ID', type: 'number' }
        ],
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        root: 'Claims',
        url: baseURL + '/Claims'
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
        formatData: function (data) {
            return JSON.stringify(data);
        },
    }); 

    $("#claimGrid").jqxGrid({
        source: dataAdapter,
        columns: [
            { text: 'Claim Log Id', datafield: 'CLAIM_LOG_ID', hidden: true },
            ...
            { text: 'Notes', datafield: 'NOTES', width: '15%' }
        ]
    });
}

I tried using “async: false” in the “source”, it works, but “Loading…” icon disappears.
I tried using “autoBind: true” in dataAdapter, it works, but the API call is done twice.
I tried with “$(“#claimGrid”).jqxGrid(‘refreshdata’, ‘cells’)” and “updatebounddata”, it works, but API call is done twice or even 3 times when using in conjunction with autoBind.

Your help please (I’m using jQWidgets v5.7.2). Thanks!

[LuisParticipant]

I found the issue, for some reason the first time the grid is displayed in IE ‘downloadComplete’ event is not triggered, so I added a ‘loadError’ and I got:
Request failed: TypeError: Object doesn’t support property or method ‘unload’

As I said before this happens only the first time, consecutives times the grid works OK. How can I fix this?

[LuisParticipant]

I fixed the issue using loadServerData.

function GetList() {
    var source = {
        datafields: [
            { name: 'CLAIM_LOG_ID', type: 'string' },
            ...
            { name: 'BANKING_ID', type: 'number' }
        ],
        datatype: 'json',
        url: baseURL + '/Claims' 
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
        loadServerData: function (serverdata, source, callback) {
            $.ajax({
                url: baseURL + '/Claims',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(prevalData),
                dataType: 'json'
            }).done(function(data) {
                callback({ records: data.Claims });
            })
            .fail(function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Error: " + errorThrown);
            });
        }
    });

    $("#claimGrid").jqxGrid({
        ...
        columns: [
            { text: 'Claim Log Id', datafield: 'CLAIM_LOG_ID', hidden: true },
            ...
            { text: 'Notes', datafield: 'NOTES', width: '15%' }
        ]
    });
    
    // Doing this the grid is displayed first with no data until the data arrives
    $("#claimGrid").jqxGrid({ source: dataAdapter });
}

[HristoParticipant]

Hello Luis,

Thank you for these details.
It could be helpful for someone else.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts