I have successfully reloaded the sorting expressions into a grid from a previous browser session by storing and reloading the sorting.expressions property.
However I notice that the column headers do not display the ascending/descending icon indicators.
In this post Stamen Stychev mentions:
"The downside of this method is that the sort style is not reapplied. Please, let me know if you need to restore the sort style as well because it'll require a different approach."
Could someone explain what is needed so that the sorting indicators are restored too.
Regards
Aidan
Hello Aidan,
To get the sort style applied you'll have to use the sortColumn method of igGridSorting. The downside of using the sortColumn method is that it works on a single column and will re-render the grid a number of times equal to the amount of sorted columns. Depending on the size of the data source this may cause performance issues.
Provided you have the sorting expressions array from the data source instance the solution will look similar to the following:
for (i = 0; i < expressions.length; i++) { $("#grid1").igGridSorting("sortColumn", expressions[i].fieldName, expressions[i].dir);}
Placed just under the grid initialization.
I hope this helps!
Best regards,
Stamen Stoychev
Hi Stamen,
Thanks for that.
I believe there could be performance issues for us.
Is there any other approach open to us?
Hi
We will be returning to work on this issue and will provide feedback.
I am just following up and see if you have any questions,
If you use Sorting's column settings to apply initial sorting as shown in the post you linked, you should be getting the arrows in the headers as well. The only thing you'll be missing should be the sorting style applied to the last sorted column. Unfortunately, there is no built-in method of telling the widget to paint one when all the sorting expressions are applied at once. A less taxing way of applying the styles manually (than rendering multiple times with the sortColumn method) could be getting the index of the column you wish to paint and using jQuery to apply the correct class. Assuming colKey is the key of the column you want to paint and sortDir is its sorting direction, the solution will look similar to the following:
var colIndex; $.each($("#grid1").igGrid("option", "columns"), function (idx) { if (colKey === this.key) { colIndex = idx; return false; }
});
This will get you the column index of the column you want to paint. Depending on the features you have enabled you might need to modify the code above. To apply the styles you'll then have to do the following:
var sorting = $("#grid1").data("igGridSorting"), sortStyles = sorting.css, activeHeader;activeHeader = $("#grid1").igGrid("headersTable") .find("th") .eq(colIndex) .addClass(sortDir === "asc" ? sortStyles.ascendingColumnHeader : sortStyles.descendingColumnHeader) .addClass(sortStyles.sortableColumnHeaderActive);sorting._currentActiveHeader = activeHeader;$("#grid1") .find("tr td:nth-child(" + (colIndex + 1) + ")") .addClass(sortDir === "asc" ? sortStyles.ascendingColumn : sortStyles.descendingColumn);
The only issue is that Sorting caches the active header cell for quick referencing and you need to update the private member with the line sorting._currentActiveHeader = activeHeader; to have it working properly. You could also submit a product idea for implementing the sort style restoration so it works out of the box.
Please, let me know if you have any other questions and/or concerns!