JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

* {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

.hoverBg {
    background: #8b0000;
    color: white;
}

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(50),
        pageSize: 10,
        schema  : {
            model: {
                fields: {
                    id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' },
                    Title    : { type: 'string' },
                    BirthDate: { type: 'date' },
                    Age      : { type: 'number' }
                }
            }
        }
    },
    editable  : "incell",
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        {
            field: "FirstName",
            width: 150,
            title: "First Name",
            locked: true
        } ,
        {
            field: "LastName",
            width: 150,
            title: "Last Name"
        } ,
        {
            width: 150,
            field: "City"
        } ,
        {
            field: "Title",
            width: 200
        } ,
        {
            field   : "BirthDate",
            title   : "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #',
            width: 150
        } ,
        {
            width: 50,
            field: "Age"
        }
    ]
});

$('#grid tr').hover(function() {
    var $this = $(this),
        uid = $this.data('uid'),
        row = $this.closest('#grid').find('tr[data-uid="' + uid + '"]');
    row.addClass('hoverBg');
}, function() {
    var $this = $(this),
        uid = $this.data('uid'),
        row = $this.closest('#grid').find('tr[data-uid="' + uid + '"]');
    row.removeClass('hoverBg');
});