jqx-grid: load different data, if certain column is sorted

[baderaParticipant]

Dear all

I have a jqx-grid loading it’s data remotely from backend (a source is defined, which loads the data automatically).

I need to fetch different data from backend, if I sort on a certain column (because this column shortens some data and if we sort on it, it should bring more rows with more details…).

My idea was to use the sort event of jqx-grid to do an ‘updatebounddata’ and then let the server know to generate more detailed rows (with ‘formatData’ in the dataAdapter). This works perfectly; but after this, the grid is no more sorted by the given column…

What is the best way to achieve what I need? – How can I bring the grid to do ‘updatebounddata’ but keep it’s sorting column? (The grid should display “loading data” during the ajax-call as it does using ‘updatebounddata’).
I know that I could do this using virtual scrolling; but currently it is no option (due to filtering complexity).

Thanks in advance for your help!
– badera

[DimitarParticipant]

Hello badera,

We suggest you implement server-side sorting. This way, when sorting a column, the data will be updated from your server and the column’s sort state will be preserved. Here is a demo with this functionality: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serversorting.htm?arctic.

Best Regards,
Dimitar

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

[baderaParticipant]

Thank you, Dimitar, this is very great!
One point I would like to improve: How can I do the updatebounddata only on a specific column?
I found out that the sort funciton of dataAdapter brings the columnname into the function so we can check which column it is. But if I do not an “updatebounddata, sort” inside this sort function, nothing happens on clicking the other columns:

If I use your example: I added to check, that only sort on column ‘ShipName’ shall do an updatebounddata. So if I sort on column ShipName, it really works. But with this code below, all other columns will no more sort.

			var source =
			{
				datatype: "json",
				datafields: [
					{ name: 'ShippedDate', type: 'date'},
					{ name: 'ShipName'},
					{ name: 'ShipAddress'},
					{ name: 'ShipCity'},
					{ name: 'ShipCountry'}
				],
				url: 'serversorting_data.php',
				sort: function(column)
				{
					if (column == 'ShipName')
 					    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				}
			};	
				
			var dataAdapter = new $.jqx.dataAdapter(source);
	
			// initialize jqxGrid
			$("#jqxgrid").jqxGrid(
			{		
				source: dataAdapter,
				
				sortable: true,
				groupable: true,
				columns: [
					{ text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 100 },
					{ text: 'Ship Name', datafield: 'ShipName', width: 200 },
					{ text: 'Address', datafield: 'ShipAddress', width: 180 },
					{ text: 'City', datafield: 'ShipCity', width: 100 },
					{ text: 'Country', datafield: 'ShipCountry', width: 140 }
				]
			});
		});

Can you help me to get it working the desired way?
I did no where find a documentation about this ‘sort’ function of the ‘source’ property of dataAdapter. Where can I find it?
Thank you in advance for your help!
– badera

[DimitarParticipant]

Hi badera,

Unfortunately, you cannot have a combination of client-side and server-side sorting. In your code you have enabled server-side sorting, but have essentially disabled the sorting for all columns but ShipName. We suggest removing the if statement and adjusting your server-side code to allow sorting by other columns, too.

The sort callback is documented on the Grid Data Sources page. Please refer to it.

Best Regards,
Dimitar

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

[baderaParticipant]

Dear Dimitar

Thanks for the clarifications. It is a pity that we can either do no server sorting or do all sorting server side (because this is a problem, if we have columns on client side, which are not constructed on the server i.e. the client build them up by himself – the server will not be able to sort them…).

My last question: Why is this ‘sort’ function also called, if I perform a filtering on the grid? – If I add a filter row to the grid constructed in the example above, the grid will do an ajax request for every filter change too (but it seems that I do not need to perform the filtering on server side because even if I send always the same content from server, the grid will filter correctly)

Thanks for your help!
– badera

[DimitarParticipant]

Hi badera,

The sort callback is not called when filtering, but there is a filter callback which is called. You can see an implementation of both in the PHP integration demo Grid Server Sorting, Paging and Filtering.

Best Regards,
Dimitar

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

[baderaParticipant]

Dear Dimitar

Yes, I know that the sort callback is not called on filtering. But If I take your server sorting example and add “filterable: true”, “showfilterrow: true” and look which requests are sent to my backend, there are also requests sent to the backend, if I enter some text in the filter row. I expected that there are only requests sent to the backend, if I change the sort column / sort direction.
What am I missing?

Thank in advance for your endurance!
– badera

[DimitarParticipant]

Hi badera,

Here is the example in question: https://www.jseditor.io/?key=server-side-sorting-and-client-side-filtering. As you can see, “Data loaded.” is logged only initially and when sorting, but not when filtering. Maybe you have also implemented the filter callback on your side?

Best Regards,
Dimitar

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

[baderaParticipant]

Dear Dimitar

Thank you very much for your live example and endurance. You can very well reproduce my described behavior, if you first sort on one column, then enter some text in the filter row (no matter in which column). Then you will see that “Loading…” is appearing again and if you open your Browser and observe the Ajax-Requests, you will see that even on enter / changing text in the filter row, server_data.php is requested every time.

Best regards,
– badera

[DimitarParticipant]

Hi badera,

This is a normal behaviour. The request is made in order to sort only the filtered records server-side. Generally, it is recommended that you implement server-side processing for both sorting and filtering. Leaving the client-side to handle one of these functionalities (while the other is handled by the back end) may result in unexpected behaviour.

Best Regards,
Dimitar

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

[baderaParticipant]

Thank you Dimitar.
To be honest, I find it not 100% logical. It would be very very helpful, if such relations would be documented…
However, thank you very much for the clarifications.
– badera

[Author]

Posts