How to use grid autoload with multi column sorting?

[georgianatParticipant]

Hi,

I have a grid with multi column sorting and “autosavestate” enabled. Every time when I sort on a column, the data is refreshed by calling the API on the backend.

I noticed that the grid state only contains the last column that the grid was sorted by. So, when I refresh the page after sorting by multiple columns, the grid is sorted by only one column, instead of multiple columns.
1. How can the grid state remember the sorting for all the chosen columns?
2. Is there a way to keep multiple columns in the “sortcolumn” property from “jqxGriddataTable” state object in the local storage?
3. Or any other way the grid can remember to sort the grid by multiple columnns on refresh?

I know about the option to apply “sortby” (e.g $(“#grid”).jqxGrid(‘sortby’, ‘columnDataFieldName’)) multiple times, but in my case that means I call the backend for each “sortby” call. I only want to call the backend once (I am using the “formatdata” to include all the columns in one request to the server).

• This topic was modified 7 months, 4 weeks ago by  georgianat.
• This topic was modified 7 months, 4 weeks ago by  georgianat.

[svetoslav_borislavovParticipant]

Hi,

In the event handler of the ‘sort’ event, you can get the saved state from the localStorage.
After that the event.args contains information about the sorting.
event.args.sortinformation.sortcolumns will return an array with elements and each of them with the datafield and the sorting direction.
You can use the array and modify the state object. Delete the sortcolumn property of the state object and define new property sortcolumns to the state object and then SET THE ITEM TO THE LOCAL STORAGE.
The down-side of this method is that you should maintain the state object because every action that triggers saving the state to the local storage will override the state and you will lose sortcolumns.
An option is to save the sortcolumns in a global variable and after every event that triggers a state saving to override the saving.

My suggestion is to save the sortcolumns in the localStorage in another item. This way when you refresh the page you can get the sortcolumns from the localStorage and use this variable for fetching the data from the back-end instead the state object. This way you will reduce the boilerplate of overriding the state.

Here is an example of overriding the state object in the localStorage: http://jsfiddle.net/64b0ecxf/
Here is an example of saving the sortcolumns in another item: http://jsfiddle.net/64b0ecxf/2/

If you need any further help, I will be happy to help!

Best regards,
Svetoslav Borislavov

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

[georgianatParticipant]

Hi,

Thanks for your reply and examples.
Keeping the sorting columns in another object in the local storage helped on sorting when refreshing the page.
The only inconvenient is that the grid doesn’t show in the UI that the columns are sorted (the sorting arrow and the grayed column).

How can all the columns be shown as sorted in the UI on refresh? If there is a way of doing that, it would help updating the second fiddle example.

Also, I think there is an issue in the grid when the sortmode is “many” and a default sorting column is defined in the datasource. The icon indicating the sort direction is not shown in the column header and when clicking on another column header to sort it, the default column sorting is cleared.

Thank you very much!
G

• This reply was modified 7 months, 3 weeks ago by  georgianat.

[svetoslav_borislavovParticipant]

Hi,

I achieved the desired behaviour. Take a look at the demo: http://jsfiddle.net/7mkghxsz/2/
When the app loads it gets the sortcolumns item from the localStorage.
Loop through the sortcolumns’ elements and invoke the grid’s sortby method to sort the grid.
In the ‘sort’ event you will only save the sorting in the localStorage and update the sortcolumns variable.
In the other events shown in the demo, you will fetch your data from the back-end based on the sortcolumns variable.
The ‘sort’ event is invoked before the events in which you should get the new data (look at the demo and see the console ‘sort’ is logged before ‘sort click’).
Hope this workaround works for you!

Best regards,
Svetoslav Borislavov

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

• This reply was modified 7 months, 3 weeks ago by  svetoslav_borislavov.

[Author]

Posts