JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet">
<div id="grid" style="margin-top: 15px"></div>
JavaScript
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
schema: {
model: {
fields: {
City: {
type: "string"
},
Title: {
type: "string"
},
BirthDate: {
type: "date"
}
}
}
},
pageSize: 10
},
height: 250,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [{
title: "Name",
width: 200,
filterable: false,
template: "#=FirstName# #=LastName#"
}, {
field: "City",
width: 100,
filterable: {
ui: cityFilter
}
}, {
field: "Title",
filterable: {
ui: titleFilter
}
}, {
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
}]
});
});
function titleFilter(element) {
element.kendoAutoComplete({
dataSource: titles
});
}
function cityFilter(element) {
element.kendoDropDownList({
dataSource: cities,
optionLabel: "--Select Value--"
});
}