JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="grid"></div>
JavaScript
var data = {
"Leagues": [
{
"GameCount": 14,
"Id": "sports/us football/afbnfl/AFBNFL NFL-12",
"Inactive": false,
"Name": "NFL",
"RenderingPriority": 0
},
{
"GameCount": 54,
"Id": "sports/us football/afbncaa/AFBNCAA NCAA Division I FBS-12",
"Inactive": false,
"Name": "NCAA FB",
"RenderingPriority": 1
},
{
"GameCount": 6,
"Id": "sports/baseball/bbmlb/BBMLB MLB-12",
"Inactive": false,
"Name": "MLB",
"RenderingPriority": 2
},
{
"GameCount": 2,
"Id": "sports/soccer/fbmls/FBMLS MLS-12",
"Inactive": false,
"Name": "MLS",
"RenderingPriority": 3
},
{
"GameCount": 10,
"Id": "sports/soccer/fbeng/FBENG Premier League-12",
"Inactive": false,
"Name": "PREMIER",
"RenderingPriority": 10
},
{
"GameCount": 8,
"Id": "sports/soccer/fbecup/FBECUP UEFA Champions League-12",
"Inactive": false,
"Name": "UEFA",
"RenderingPriority": 10
}
]
}
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/echo/json/",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
data: { //using jsFiddle echo service to simulate Ajax request
json: JSON.stringify(data)
}
}
},
schema: {
data: "Leagues",
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Name: { validation: { required: true } }
}
}
}
});
function initGrid(dataSource) {
...