We are making use of 2013.2 version iggrid. We need apply different css styles based on the column the grid is currently sorted on.
Our grids are virtualized with continuous option and the row styles are getting applied in the rows rendered event.
We now have a requirement to change these styles based on the column the grid is currently sorted on.
Hence could you please let me know the api that I can use in the rows rendered event, which can let me know the column on which the grid is currently sorted, so that I can apply the styling in a conditional manner based on current sorted column.
Thanks,
Kiran Kumar L
Hello Kiran.
Thank you for posting in our community.
After looking further into your requirement what I can suggest is getting reference to the table headers collection. In case that a particular column is sorted the title attribute of the header will have one of the following values: "sorted ascending" or "sorted descending". If the column is not sorted the title is going to be "click to sort column". This could be achieved in the rowsRenederd event of the grid as you suggested:
rowsRendered: function (evt, ui) { var headers = $(".ui-iggrid-header"); $.each(headers, function () { var title = this.attributes["title"].value; if (title == "sorted ascending" || title == "sorted descending") { alert("Grid is sorted by column " + this.attributes["id"].value); } });
rowsRendered: function (evt, ui) {
var headers = $(".ui-iggrid-header");
$.each(headers, function () {
var title = this.attributes["title"].value;
if (title == "sorted ascending" || title == "sorted descending") {
alert("Grid is sorted by column " + this.attributes["id"].value);
}
});
I made a small sample and I am attaching it for your reference. In my sample I am showing an alert with the name of the currently sorted column. However, instead of showing the alert you could apply any logic once the sorted column is determined.
I hope you find this information helpful.
Please let me know if you have any additional questions regarding this matter.
Hello Vasya,
Thanks for the code snippet.
I have more than one grid on my page, what is the easiest way to get a reference to headers collection of the grid for which rowsRendered event is fired for.
Kiran