Virtual scrolling with 0 or 100k results

[hopperParticipant]

Hi,

I have the case, that we can have a large resultset, so I use virtual scrolling. But it can also be, that there is an empty resultset, because the resultset is updated with ajax.

I use rendergridrows as mentioned in the virtual scrolling documentation and trigger the update by jqxGrid(‘updatebounddata’);

This works fine, if there is a non empty resultset. But if the result was empty and then should be refilled again, it doesn’t work. The table is not updated. I guess this is, because there are no rows in it, that can be updated.

But how can I update the whole table and push new data in it?

See this fiddle for example.
If you push the button, the renderdata returns an empty array. How can I fill the table again with the next click on update?

Regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

When the totalrecords is 0, the rendergridrows function would not be called due to the fact that it is not necessary to be called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hopperParticipant]

Hi Peter,

so there is no chance to force this and maybe get updated data?
What can I do in this case? Re-initialize the whole grid?

Thanks a lot.

Regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

The problem is that you cannot and should not change the rows count in a function which is supposed to render the rows.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hopperParticipant]

Hi Peter,

thanks for your answer. Do you have a hint for me, how I can solve the problem, that I want to update the data of my grid with a resultset of 0 – 100k entries loaded by ajax in virtualmode, without having to reload the whole page?

Thanks a lot.

Best regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

The hint is that you should not update totalrecords inside the rendering function. This should happen outside it. In our samples, we do it inside the beforeprocessing callback or in the dataAdapter’s downloadComplete callback. My suggestion is: do it as in the samples.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hopperParticipant]

Hi Peter,

I do it like in the example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/virtualscrolling.htm
The only difference is, that I load the data via json and that my amount of results can differ.

I did not find the “beforeprocessing” callback in the documentation, so I am thankful for a short push in the right direction.

The process I use is like this:

1. load table meta data like columns, mappings => one time per page load
2. initialize the table => one time per page load
3. user creates and submits filter string => multiple times per page load
4. filter string is evaluated and returns a result which need to be loaded into the table => multiple times per page load
result is >= 0

This is, how I do it in code:

// General Table setup
listHandler.sourceTable.datatype = 'array';
listHandler.sourceTable.localdata = {};
listHandler.sourceTable.id = 'id';
// I do this to get at least any data loaded
listHandler.sourceTable.totalrecords = 1;

// get columns etc.
$.ajax(listHandler.options.urlList.api_filter_column_data, {
    type: 'POST',
    async: false,
    success: function(data) {
        listHandler.sourceTable.datafields = data.datafields;
        listHandler.sourceTable.column_mapping = data.column_mapping;
    }
});

// load the table with the data
var dataAdapter = new $.jqx.dataAdapter(listHandler.sourceTable);

var jqxGridSettings = $.extend(
    listHandler.options.jxgGridSettings,
    {
        source: dataAdapter,
        columns: listHandler.sourceTable.column_mapping,
        rendergridrows: function (params) {
            return listHandler.updateList(
                JSON.stringify(listHandler.currentCriteriaFilter),
                listHandler.options.listId,
                params.startindex,
                params.endindex,
                listHandler.requestCount,
                listHandler.sortColumn,
                listHandler.sortDirection
            );
        }
    });

listHandler.jqxGridInstance = $(listHandler.element.wrapper).jqxGrid(jqxGridSettings);

The function “updateList” is defined as follows:

updateList: function(criteriaFilterString, listId, startindex, endindex, getRequestCount, sortColumn, sortDirection) {
    var listHandler = this;

    var requestData = {
        criteria_list: criteriaFilterString,
        list_id: listId,
        start: startindex,
        end:  endindex
    };

    var dataToReturn = {};
    $.ajax(listHandler.options.urlList.recipient_list_api_filter, {
            data: requestData,
            type: 'POST',
            async: false,
            success: function (data) {
                // updating the table with the amount of records
                listHandler.sourceTable.totalrecords =  data.totalrecords;
                dataToReturn =  data.result;
                
            }
        }
    );
    return dataToReturn;
}

The grid update itself is triggered by

listHandler.jqxGridInstance.jqxGrid('updatebounddata');

Thanks a lot.

Best regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

The code you’re posting illustrates the same problem. Your updateList function still updates the totalrecords. This will not work, because the number of Grid records shouldn’t be set within a Rendering Function. I wrote you about beforeprocessing or downloadComplete – it is your choice which one to use. The beforeprocessing is illustrated in the documentation, the downloadComplete, too. Also Virtual Scrolling sample with Ajax requests is available in the “phpdemos” folder included in the download package.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hopperParticipant]

Hi Peter,

thanks for the links, they were exactly what I needed!! Got it working now…

Best regards

Stephan

[hopperParticipant]

Hi Peter,

I am sorry, I must reopen this thread again.

I adopted my code like the documentation said and it all works fine with virtual scrolling.
Now the requirement changed to use virtual paging. I expected, that I just change the setting from pageable: false to pageable: true and everything will work like before.

And really, the server requests are still fired and correct data is responded. BUT it is not shown in the table. The first page is loaded perfectly, the second and all other coming are empty.

I do the following:

var dataAdapter = new $.jqx.dataAdapter(listHandler.sourceTable, {
    loadServerData: function (serverdata, source, callback) {
        var requestData = {
            start: serverdata.pagenum*serverdata.pagesize,
            end: (serverdata.pagenum+1)*serverdata.pagesize
        };

        $.ajax(listHandler.options.urlList.recipient_list_api_filter, {
                data: requestData,
                type: 'POST',
                async: true,
                success: function (data) {
                    // data.result contains the json data, data.totalrecords contain the number of overall records
                    callback({ records: data.result, totalrecords: data.totalrecords });
                }
            }
        );
    }
});

var jqxGridSettings = $.extend(
    listHandler.options.jxgGridSettings,
    {
        source: dataAdapter,
        columns: listHandler.sourceTable.column_mapping,
        rendergridrows: function (params) {
            return params.data;
        }

    });

listHandler.jqxGridInstance = $(listHandler.element.wrapper).jqxGrid(jqxGridSettings);

params.data is filled with the correct data, but interestingly the fields startindex and endindex are always the same (0 and 10).

I have no clue what the problem is and I really stuck on that. Any idea what the problem can be?

Thanks Stephan

[Peter StoevKeymaster]

Hi Stephan,

There are multiple samples available online and in the download package which illustrate how to implement Server Paging. One of them is: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?arctic. On your server side, you should take into account the pagesize and pagenum parameters.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hopperParticipant]

Hi Peter,

I do everything like in the samples and it works all fine on the server side. As I said, the problem seems to be on jqxGrid side.

Now I found out, that if I set the startindex and endindex parameter in rendergridrows by hand, than it works…

var dataAdapter = new $.jqx.dataAdapter(listHandler.sourceTable, {
    loadServerData: function (serverdata, source, callback) {
        var requestData = {
            start: serverdata.pagenum*serverdata.pagesize,
            end: (serverdata.pagenum+1)*serverdata.pagesize
        };

        $.ajax(listHandler.options.urlList.recipient_list_api_filter, {
                data: requestData,
                type: 'POST',
                async: true,
                success: function (data) {
                    // HERE: Remember the current start and endindex
                    dataAdapter.startIndex = requestData.start;
                    dataAdapter.endIndex = requestData.end;
                    // data.result contains the json data, data.totalrecords contain the number of overall records
                    callback({ records: data.result, totalrecords: data.totalrecords });
                }
            }
        );
    }
});

var jqxGridSettings = $.extend(
    listHandler.options.jxgGridSettings,
    {
        source: dataAdapter,
        columns: listHandler.sourceTable.column_mapping,
        rendergridrows: function (params) {
            // HERE: set the current start and endindex because by default it is always 0 and 10
            params.startindex = dataAdapter.startIndex;
            params.endindex = dataAdapter.endIndex;
            return params.data;
        }

    });

listHandler.jqxGridInstance = $(listHandler.element.wrapper).jqxGrid(jqxGridSettings);

I would say this is maybe a bug in jqxGrid in combination with the usage of the loadServerData function.

Regards

Stephan

[Author]

Posts