JSFiddle - React, Tailwind, and code Playground

by edsinek

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<p>Savings:
    <div id="myGrid"></div>
</p>

CSS

td {
    white-space: nowrap;
}

JavaScript

function onDataBound(e) {
    console.log("on data bound");
    $("#myGrid").on("focus", "td", function () {
        console.log("grid focus");
        var $ele = $(this);
        var $grd = $("#myGrid").find(".k-virtual-scrollable-wrap");
        $grd.animate({
            scrollTop: $ele.offset().top - $grd.offset().top + $grd.scrollTop()
        });
    });
}

var savings = [{
    month: "January",
    saving: "$200",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March sdjhf as dfjh;as",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$10000",
    kind: 1
}, {
    month: "December",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 2
}, {
    month: "March",
    saving: "$100",
    kind: 3
}, {
    month: "March",
    saving: "$100",
    kind: 1
}];

var savingsDataSource = new kendo.data.DataSource({
    data: savings
});


var grid = $("#myGrid").kendoGrid({
    dataSource: savingsDataSource,
    navigatable: true,
    pageable: {
        numeric: false,
        previousNext: false
    },
    scrollable: {
        virtual: true
    },
    sortable: {
        mode: "single",
        allowUnsort: false
    },
    selectable: "row",
    height: 300,
    columns: [{
        field: "month"
    }, {
        field: "saving"
    }, {
        field: "saving"
    }, {
        field: "kind"
    }],
    dataBound: onDataBound,
}).data("kendoGrid");