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,
I am glad that you find my suggestion helpful.
Please let me know if you need any further assistance with this matter.
Hello Vasya,
Thanks Vasya. This code snippet helps to implement my requirements in a generic way.
Thank you for getting back to me.
In case that you have more than one igGrid what I can suggest is use the ui.owner to get reference to the igGrid for which the event is fired. By design, grid column headers id attribute consists of grid id and column key, looking similar to the following: grid1_CustomerID for the CustomerID column. In this case, what I can suggest is using jQuery jQuery Starts With Selector . With this selector elements that have specified attribute with a value beginning with a given string could be selected. In your scenario ui.owner.id could be used to get reference to the particular grid that the rowsRendered event is fired for. Afterwards, using the starts with selector a reference to the headers collection only for this grid could be retrieved as following:
function getSortedColumn(evt, ui) { var id = ui.owner.id(); var headers = $('th[id^="' + id + '"]'); $.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); } }); }
function getSortedColumn(evt, ui) {
var id = ui.owner.id();
var headers = $('th[id^="' + id + '"]');
$.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);
}
});
This implementation is suitable for your scenario because even if more than one grids are used the function could be called for every grid`s rowsRendered event and it is going to be applied only for that grid`s header collection.
$("#grid1").igGrid({ dataSource: gridData, //JSON Array defined above width: "450px", features: [ { name: "Sorting", type: "local" } ], rowsRendered: getSortedColumn }); $("#grid2").igGrid({ dataSource: data, //JSON Array defined above width: "450px", features: [ { name: "Sorting", type: "local" } ], rowsRendered: getSortedColumn });
$("#grid1").igGrid({
dataSource: gridData, //JSON Array defined above
width: "450px",
features: [
{
name: "Sorting",
type: "local"
],
rowsRendered: getSortedColumn
$("#grid2").igGrid({
dataSource: data, //JSON Array defined above
I am attaching my modified sample for your reference.
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
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");
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.