JSFiddle - React, Tailwind, and code Playground

by Neeraj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

#grid {
    width:300px;
}

JavaScript

var grid = null;

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        data: [{
            ID: 1,
            Text: "some text"
        }, {
            ID: 2,
            Text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
        }, {
            ID: 3,
            Text: " Duis ut nulla eget lectus posuere tempor. "
        }],
        schema: {
            model: {
                fields: {
                    ID: {
                        type: "number"
                    },
                    Text: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20
    });

    grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        scrollable: true,
        filterable: true,
        toolbar: ["create"],
        columns: [{
            field: "ID",
            width: "50px"
        }, {
            field: "Text",
            width: "200px",
            attributes: {
                style: 'white-space: nowrap '
            }
        }],
        editable: "incell"
    }).data("kendoGrid");



    $("#grid").kendoTooltip({
        filter: "td:nth-child(2)", //this filter selects the first column cells
        position: "right",
        content: function (e) {
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var content = dataItem.Text;
            return content;
        }
    }).data("kendoTooltip");






});