JSFiddle - React, Tailwind, and code Playground

by RichardAD

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<a class="delete" href="#" data-action="delete" data-itemid="0" data-name="Zero#">Click installed here</a>
<div id="itemList">
<script id="itemListRowTemplate" type="text/x-kendo-tmpl">

    # /*alert(JSON.stringify(data))*/ #
    
  <tr class="k-alt">
    <td class="itemID">id is #= itemID #</td>
    <td>
        <span class="viewlink">
            <a href="http://servername.com/handler?topic=item&action=view&itemID=#= itemID #">name is #= name #</a>
        </span>
        <span class="editlinks">
            Click not installed here <a class="delete" href="\#" data-action="delete" data-itemid="#= itemID #" data-name="#= name #">delete</a> |
            <a class="rename" href="\#" data-action="rename" data-itemid="#= itemID #" data-name="#= name #">rename</a>
        </span>
    </td>
    <td>#= created #</td>
  </tr>
</script>
</div>

CSS

.viewlink  { float:left }
.editlinks { float:right; font-size: 9px; }
.itemID { width: 10em }

JavaScript

$(document).ready(function() {
        $("#itemList").kendoGrid({
             height: 400,
             groupable: false,
             sortable: true,
             scrollable: true,
             pageable: true,

             rowTemplate   : kendo.template($("#itemListRowTemplate").html().replace('k-alt', '')),
             altRowTemplate: kendo.template($("#itemListRowTemplate").html()),

             toolbar: [
                 {name:"create", text:"Add Item", id:"add"},
             ],
             columns: [
                 {   field: "ItemID",
                     title: "ID",
                     width: "8em"
                 },
                 {    field: "Name"
                 },
                 {    field: "timestamp",
                     title: "Created",
                     width: "8em"
                 }
             ],
             dataSource: {
                 data: [
                     {itemID:1,name:'One',created:'3 days ago'}
                     , {itemID:2,name:'Two',created:'3 days ago'}
                     , {itemID:3,name:'Three',created:'1 day ago'}
                     , {itemID:4,name:'Four',created:'today'}
                     ],
                 schema: {
                     model: {
                         fields: {
                             itemID: "itemID",
                             name: "name",
                             created: "created"
                         }
                     }
                 }
             }
         });

 
    $('.rename, .delete').click(function(){
        alert('Clicked on'+$(this).data('action'));
        return false;
    });
    
   
    
 });