CODEWITHSUNDEEP
jquerycolorskendo-ui
NFeskova
NFeskova

Reputation: 77

Changing the color of the filtered or sorted column in grid kendo ui

Hi I want to change the background color of the column (of the kendo ui grid) that has been filtered or sorted . I want to change the color of the whole column not just the header. Does anyone knows how to get to this with a css class?

Upvotes: 0

Views: 3110

Answers (2)

jgoeglein
jgoeglein

Reputation: 271

I know I'm late to the game on this, but I had this requirement in an application I'm building as well and figured I'd share a solution. Highlighting cells is the easy part - getting into Kendo to figure out which cells to highlight is the trick. I used @Atanas Korchev's response and modified it to keep it from highlighting the Kendo footer:

var filterObj = $("#grid").data("kendoGrid").dataSource.filter;
if (filterObj.arguments && filterObj.arguments[0]) {
    filterObj.arguments[0].filters.forEach(function(val) {
        var index = $(".k-header[data-field='" + val.field + "']").index();
        $("#grid tr[role='row']").find("td:eq(" + index + ")").css("background-color", "red");
    });
}

Big caveat - I completely reverse engineered this on my own without consulting the Kendo docs (which are a maze at best) so this is something that you can't guarantee to keep working in future releases. We're fixed here on our version of Kendo for the time being at least, so it works for us (for now). Also, I didn't spend enough time to really understand why there's only ever one object in the "arguments" list - you may need to loop through that at some point as well to pull out those filters if your use-case or configuration is somehow different (again, in my local scenario, it doesn't appear to ever exceed 1 argument, which makes me a little nervous). It's just one more .forEach though anyway...

Upvotes: 2

Atanas Korchev
Atanas Korchev

Reputation: 30671

You can find the n-th cell (corresponding to the index of the filtered column) and set their CSS style:

$("#grid tr").find("td:eq(1)").css('background', 'grey');

This will set the background of every second cell to grey. Here is a live demo:

http://jsbin.com/ixozad/1/edit

Upvotes: 1

Related Questions