JSFiddle - React, Tailwind, and code Playground
by Abra Cadabra
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<div id="example" class="k-content">
<div id="grid"></div>
</div>
JavaScript
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
ShipCountry: {
type: "string"
},
ShipCity: {
type: "string"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShippedDate: {
type: "date"
}
}
}
},
pageSize: 15
},
height: 430,
sortable: true,
resizable: true,
pageable: true,
columns: [{
field: "OrderDate",
title: "Order Date",
width: 110,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipCountry",
title: "Ship Country",
width: 110
}, {
field: "ShipCity",
title: "Ship City",
width: 110
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "OrderID",
title: "ID",
width: 60
}],
columnResize: function(e){
console.log("asdasdasd");
if (this.wrapper.find('col').width() < 60) {
$(this).css("width", "60px");
...