JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="grid"></div>
JavaScript
var mydata = [{
Facility: 1,
Subsystem: "AM"
}, {
Facility: 2,
Subsystem: "AM"
}, {
Facility: 3,
Subsystem: "AM"
}, {
Facility: 4,
Subsystem: "AM"
}, {
Facility: 5,
Subsystem: "AM"
}, {
Facility: 1,
Subsystem: "AP"
}, {
Facility: 2,
Subsystem: "AP"
}, {
Facility: 3,
Subsystem: "AP"
}, {
Facility: 4,
Subsystem: "AP"
}, {
Facility: 5,
Subsystem: "AP"
}, {
Facility: 1,
Subsystem: "GL"
}, {
Facility: 2,
Subsystem: "GL"
}, {
Facility: 3,
Subsystem: "GL"
}, {
Facility: 4,
Subsystem: "GL"
}, {
Facility: 5,
Subsystem: "GL"
}];
var scheduleDataSource = new kendo.data.DataSource({
schema: {
model: {
id: "Subsystem",
fields: {
Facility: {
editable: false,
nullable: false,
defaultValue: ""
},
Subsystem: {
editable: false,
nullable: false,
defaultValue: ""
}
}
}
},
group: {
field: "Subsystem"
},
data: mydata
});
$("#grid").kendoGrid({
autobind: false,
dataSource: scheduleDataSource,
columns: [
{ field: "Facility", title: "Facility", width: 80 }
],
filterable: true,
groupable: false,
sortable: true,
pageable: false,
scrollable: true,
resizable: true,
selectable: "row"
});