[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

[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

[hopperParticipant]

Hi Peter,

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

Best regards

Stephan

[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

[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

[hopperParticipant]

Hi,

the problem with the selected checkboxes also exists with virtualmode = true and pageable = true.
It seems, that the selected checkboxes are store per page. If I select 2 checkboxes at page three, these are always selected, independent of the data behind them.

Is that possible?

Regards

Stephan

[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

[hopperParticipant]

Hi Peter,

thanks for your answer. Is there something like chunk loading in jqxgrid? I have the situation that I want to show > 50k data entries which are loaded by ajax in json format. Transmitting the data via 16 MBit Cable takes at least up to 10 seconds.

How would you handle that situation if you have the request to show the first 100 data sets very fast and should be able to export/manipulate the whole data set also?

Thanks a lot.

Best regards

Stephan

[hopperParticipant]

Hi Peter,

I solved it that way, that I add the render function in the javascript by moving through the mapping and if the matching field is found, add the function there.

Regards

Stephan

[hopperParticipant]

Hi Peter,

thanks for that information. Is it somehow possible to load the renderer also, when the whole table is initialized via json?
Can I just put the html inside the json data?

Thanks a lot.

Regards

Stephan

[hopperParticipant]

Hi Peter,

here is the fiddle: http://jsfiddle.net/Y69JZ/1/

So there is no chance to have a custom checkbox in the header?

Regards

Stephan

[hopperParticipant]

Hi Peter,

thanks for the hint to jsFiddle. I tried to re-create the problem there and found out, that there was a bug in my implementation.
I will keep track on this thread if the problem reoccurs.

Regards

Stephan

[hopperParticipant]

Hi,

the error returned. I have the problem if I replace an loaded grid with another one.
The way I take is to call the destroy function on the old grid and initialize the new one then.

The error occurs even if binding is completed (I tested it).

So I have no real idea what to do. I guess it is a problem in jqxGrid.

The error is:

Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the 'bindingcomplete' event. Call this function in the 'bindingcomplete' event handler. 06e8f5a_jqxgrid.sort_12.js:7
a.extend.sortby 06e8f5a_jqxgrid.sort_12.js:7
a.extend.removesort 06e8f5a_jqxgrid.sort_12.js:7
b.extend.propertyChangedHandler 06e8f5a_jqxgrid_8.js:7
a.jqx.setvalueraiseevent 06e8f5a_jqxcore_1.js:7
(anonymous function) 06e8f5a_jqxcore_1.js:7
x.extend.each jquery-2.0.3.js:598
a.jqx.set 06e8f5a_jqxcore_1.js:7
a.jqx.jqxWidgetProxy 06e8f5a_jqxcore_1.js:7
(anonymous function) 06e8f5a_jqxcore_1.js:7
x.extend.each jquery-2.0.3.js:590
x.fn.x.each jquery-2.0.3.js:237
a.fn.(anonymous function) 06e8f5a_jqxcore_1.js:7
$.fn.s7ExpedientList 06e8f5a_expedient_list_handler_23.js:45
showExpedients 06e8f5a_company_tree_handler_24.js:60
(anonymous function) 06e8f5a_company_tree_handler_24.js:49
x.event.dispatch jquery-2.0.3.js:4676
y.handle

[hopperParticipant]

Hi,

I created a new grid in a div where a grid still exists before and I had the same problem.
The message disapeared when I removed the pagesizeoptions settings from the grid initialization. Independent of the setting make sense here (because pageable is not set) the error disapeared after removing it.

$(localThis).jqxGrid(
            {
                source: dataAdapter,
                //width: '100%',
                //autoheight: true,
                height: '60%',
                //pageable: true,
                sortable: true,
                //pagesizeoptions: ['10', '20', '30', '40', '50'],
                columns: settings.columns,
                selectionmode: 'multiplerowsadvanced',
                theme: settings.theme
            });

[hopperParticipant]

This is solved with information from here: http://www.jqwidgets.com/community/topic/how-to-dynamically-insert-html-li-items/#post-1876

There is said that in future versions the “html” field will also be available in jqxTree and this really works. Unfortunately it is not documented.

Regards

Stephan

[Author]

Posts