[Solved] Styling sorted column header

[Josh]

Is there a way to style a sorted column header? The ASP.NET version apparently uses the .rgSorted class, but the MVC grid doesn't seem to add a class to sorted header cells. All I can see that happens is the sort arrow span gets added on a sort. Is there any way to remedy this, or is there a setting that would solve this problem?

Thanks,
Josh C

[Dimo]

Hello Josh,

Here is what you can do:

.ClientEvents(ev => ev.OnDataBinding("removeSortStyles").OnDataBound("applySortStyles"))

function removeSortStyles(e)
{
    var gridElement = $(this);
    $("td", gridElement).removeClass("mySorted");
}

function applySortStyles(e)
{
    var gridElement = $(this);
    $("th.t-header .t-link .t-icon").filter(":visible").each(function(index, element) {
        var cellIndex = $(element).closest(".t-header")[0].cellIndex;
        // if Grid is scrollable
        $(".t-grid-content tr", gridElement).each(function(index2, element2) {
            $(element2.cells[cellIndex]).addClass("mySorted");
        });
        // else
//        $(">table tbody tr", gridElement).each(function(index2, element2) {
//            $(element2.cells[cellIndex]).addClass("mySorted");
//        });

    });
}

.mySorted
{
    background:#ff0;
}

The above will apply yellow background to sorted data cells. If you want to style the header cells, you should modify this jQuery selector:

$(".t-grid-content tr", gridElement)

to

$(".t-grid-content tr,.t-grid-header tr", gridElement)

and

$("td", gridElement).removeClass("mySorted");

to

$("th, td", gridElement).removeClass("mySorted");


Regards,
Dimo
the Telerik team