Server Side Paging with Client Side Sorting

[bstras21Participant]

Hello, hopefully someone can help me. Support hasn’t really been helpful, essentially all I get is ‘Yes it’s possible, Take the sort order into account when you return rows within the rendergridrows custom function‘. Well I have tried everything and cannot get sorting to work. I can console out the Name and Direction but nothing happens. Then I try:

$(‘#jqxGrid’).jqxGrid(‘sortby’, ‘columndatafield’, ‘asc’);

That result is a max execution error. Hopefully someone can help out.

var source ={
datatype: “json”,
datafields: fields,
id: ‘ID’,
cache: false,
url:url,
root: ‘Rows’,
beforeprocessing: function(data){
if (data != null){
source.totalrecords = data[0].TotalRows;
}
},
sort: function (name, bool) {
//$(element).jqxGrid(‘updatebounddata’);
//console.log(name + ‘-‘ + bool );
//$(element).jqxGrid(‘sortby’, name, ‘asc’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadError: function (xhr, status, error) {
FUNC.userMessage(‘Error’, error, CONST.messageError);
},
formatData: function (data) {
$.extend(data, {
supersearch:$(‘.simply-filter’).val()
});

return data;
}
});

$(element).jqxGrid({
width: ‘100%’,
pageable: true,
pagermode: ‘simple’,
pagesize:20,
source: dataAdapter,
columnsresize: true,
selectionmode: ‘singlerow’,
sortable: true,
theme: ‘metro’,
autoheight: true,
autoshowloadelement: false,
autorowheight: true,
columns: columns,
virtualmode: true,
sorttogglestates: 1,
showfiltercolumnbackground: true,
rendergridrows: function(obj){
console.log(obj)
return obj.data;
},
rendered: function(data){
//console.log(data);
$(element).jqxGrid(‘gotopage’, 0);
}
});

$(element).on(“sort”, function (event) {

// event arguments.
var args = event.args;
// sorting information.
var sortInfo = event.args.sortinformation;
// sort direction.
var sortdirection = sortInfo.sortdirection.ascending ? “ascending” : “descending”;
// column data field.
var sortColumnDataField = sortInfo.sortcolumn;
console.log(sortInfo);

$(element).jqxGrid(‘sortby’, sortColumnDataField, ‘asc’);
});

[Peter StoevKeymaster]

Hi bstras21,

Below is your rendergridrows function:

rendergridrows: function(obj){
console.log(obj)
return obj.data;
},

If you want to handle client-side sorting and combine it with server paging for some reason, you will have to take into account the Sort order and Sort field within that function and return appropriate data. You can use the “getsortinformation” method for that purpose: http://jsfiddle.net/jqwidgets/hkRXX/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[bstras21Participant]

I’m not sure we are on the same page. I want to be able to click the headers and sort the columns (local data just for that page) after the data is fetched from the server, doesn’t rendergridrows just sort the data initially? I can already get the information via the sort function.

[Author]

Posts