JSFiddle - React, Tailwind, and code Playground

by whoamiwho

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="example" class="k-content">
    <div id="grid"></div>
</div>

JavaScript

var wnd;
var people = [{
    firstName: "John",
    lastName: "Smith",
    email: "[email protected]"
}, {
    firstName: "Jane",
    lastName: "Smith",
    email: "[email protected]"
}, {
    firstName: "Josh",
    lastName: "Davis",
    email: "[email protected]"
}, {
    firstName: "Cindy",
    lastName: "Jones",
    email: "[email protected]"
}];;
$(document).kendoTooltip({
    filter: "span", // if we filter as td it shows text present in each td of the table

    content: function (e) {
        var grid2 = $("#grid").data("kendoGrid");
        var retStr;
        $.each(grid2.columns[3].command,function( index, value ) {            
            if (e.target.hasClass(value.imageClass)){
                retStr=value.title;
                return false
            }            
        });
        return retStr
        
    }, //kendo.template($("#template").html()),
    width: 160,

    position: "top"
}).data("kendoTooltip");

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            pageSize: 20,
            data: people
        },
        pageable: true,
        height: 430,
        columns: [{
            field: "firstName",
            title: "First Name",
            width: "100px"
        }, {
            field: "lastName",
            title: "Last Name",
            width: "100px"
        }, {
            field: "email",
            title: "Email",
            width: "180px"
        }, {command: [{ name:"Update User Details", text: "", title: "Update User Details", Class: "test", imageClass:"k-icon k-i-pencil", click: showDetails },
                        { name: "destroy", text: "", title: "Delete User!!", imageClass: "k-icon k-delete" }]
                }]
    }).data("kendoGrid");
});

function showDetails(e) {

    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}