JSFiddle - React, Tailwind, and code Playground
HTML
<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">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div id="grid"></div>
CSS
.selected{
background: red;
color: white;
}
JavaScript
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "http://aip-mdm.production.azure/_xl/context/Products",
dataType: "json"
},
pageable: true,
pageSize: 50,
//page: 0,
//total: 0,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true
},
height: 550,
sortable: true,
grouping: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ProductId",
title: "Product Id",
},
{
field: "Name",
title: "Product Name",
}
]
});