JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr> 
            <td> #= id #</td>
            <td> #= FirstName # </td>
            <td> #= LastName # </td> 
        </tr>
    </script>

    <script id="detailTemplate" type="text/x-kendo-tmpl">
        
        # if (id) { #
            #= id #
        # } else { #
            <p>detail stuff</p>
        # } #        
    </script>

    <script id="idTemplate" type="text/x-kendo-tmpl">
        # if (id) { #
            #= id #
        # } else { #
            TEST
        # } #
    </script>
    
</div>

JavaScript

$("#grid").kendoGrid({
    columns:[
        {    
            field: "id",
            title: "id",
            template: $("#idTemplate").html()
            
        },     
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "LastName",
            title: "Last Name"
        }
    ],
    
    dataSource: {
        data: [
            {
                id:"",
                FirstName: "Joe",
                LastName: "Smith",
            },
            {
                id:"1",
                FirstName: "Jane",
                LastName: "Smith"
            }]
    },
    
    //rowTemplate:kendo.template($("#rowTemplate").html()),
    detailTemplate: kendo.template($("#detailTemplate").html()) 
    
});