JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="grid"></div>

CSS

#grid .k-header.sort-dir-asc {
 background-color: yellow;   
}

#grid .k-header.sort-dir-desc {
 background-color: red;   
}

JavaScript

var data = [
        {id: 1, foo: "AAA"},
        {id: 2, foo: "ABB"},
        {id: 3, foo: "CCC"},
        {id: 4, foo: "DDD"},
        {id: 5, foo: "EEE"}
    ],
    dataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    foo: {type: "string"}                
                }
            }            
        }
    });

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    dataBound: function(e) {
        var sorting = this.dataSource.sort() || []; //retrieve sort

        if(sorting.length != 0) { //if there are any
            var field = sorting[0].field, //sort by field
                dir = sorting[0].dir, //sort direction
                th = this.thead.find("[data-field=" + field + "]"); //th item
            
            th.removeClass() //remove all classes
                .addClass("k-header sort-dir-" + dir); //add default + sort-dir class
        } else {
            this.thead.find("th").each(function(index, item) {
               $(item).removeClass() //remove all classes
                   .addClass("k-header"); //add the default class
            });
        }
    }
});