JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<div id="divCustomer" class="">
<div id="gridCustomer"></div>
</div>
JavaScript
var gridCustomer;
function onDataBound(arg) {
setGridButtonToolTips();
}
function setGridButtonToolTips()
{
gridButtonToolTips(
{".k-edit": "Edit"}
);
}
$(document).ready(function () {
//var baseUrl = "../api";
var dsCustomer = new kendo.data.DataSource({
transport: {
read: {
//url: "//demos.telerik.com/kendo-ui/service/products",
url: "//northwind.servicestack.net/customers.json",
dataType: "json"
//cache: false
},
/*update: {
url: "//northwind.servicestack.net/customers.json",
dataType: "json",
contentType: "application/json;charset=UTF-8",
accepts: "application/json",
type: 'POST',
beforeSend: function (xhr) {
xhr.setRequestHeader('X-CSRF-Token', $("#csrfToken").val());
}
},*/
parameterMap: function(options, operation) {
if (operation !== "read") {
var s = JSON.stringify(options);
return s;
}
}
},
pageSize: 200,
schema: {
model: {
id: "ID",
fields: {
ID:{type:"string"},
CompanyName:{type:"string"},
ContactTitle:{type:"string"},
Address:{type:"string"},
City:{type:"string"},
Country:{type:"string"}
}
}
}
});
gridCustomer = $("#gridCustomer").kendoGrid({
//autoBind: false,
//dataBound: onDataBound,
dataSource: dsCustomer,
//cancel: setGridButtonToolTips,
//toolbar: kendo.template($("#tooltemplate").html()),
toolbar: ["create", "excel"],
excel: {
fileName: "Customer.xlsx",
filterable: false,
allPages: true
},
pageable: true,
scrollable: true,
resizable: true,
columnMenu: false,
sortable: true,
height: 760,
filterable: {
mode: "row"
},
columns: [
{command: ["edit"], title: " ", width:45, locked: true},
{field:"ID", title:"Customer ID", width:180, locked: true},
{field:"CompanyName", title:"Company Name", width:180, editor:cbContactTitle},
{field:"ContactTitle",...