JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<div id="grid"></div>
CSS
.fake{color:red}.k-reset{margin:0;padding:0;border:0;outline:0;text-decoration:none;font-size:100%;list-style:none}.k-floatwrap:after,.k-slider-items:after,.k-grid-toolbar:after{content:"";display:block;clear:both;visibility:hidden;height:0;overflow:hidden}.k-floatwrap,.k-slider-items,.k-grid-toolbar{display:inline-block}.k-floatwrap,.k-slider-items,.k-grid-toolbar{display:block}.k-button,.k-header,.k-grid-header,.k-toolbar,.k-grouping-header,.k-tooltip,.k-pager-wrap,.k-tabstrip-items .k-item,.k-link.k-state-hover,.k-autocomplete,.k-dropdown-wrap,.k-picker-wrap,.k-numeric-wrap,.k-autocomplete.k-state-hover,.k-dropdown-wrap.k-state-hover,.k-picker-wrap.k-state-hover,.k-numeric-wrap.k-state-hover,.k-draghandle{background-repeat:repeat-x;background-position:0 center}.k-tabstrip,.k-menu-vertical,.k-editor,.k-tooltip,.k-state-hover,.k-state-focused,.k-state-selected{background-position:0 -258px}.k-widget,.k-input[type="text"],.k-input[type="number"],.k-textbox,.k-picker-wrap .k-input,.k-button,.k-draghandle{font-size:100%;font-family:inherit;border-style:solid;border-width:1px;-webkit-appearance:none}.k-widget{line-height:normal}.k-button{display:inline-block;margin:0;padding:2px 7px 2px;font-family:inherit;line-height:1.66em;text-align:center;cursor:pointer;outline:0;text-decoration:none}a.k-button{-webkit-user-select:none;-moz-user-select:none;user-select:none}.k-button:-moz-any(input[type="submit"],input[type="button"],input[type="reset"]){padding-bottom:.37em;padding-top:.37em}*+html .k-button{overflow:visible;margin-right:4px}*+html a.k-button{line-height:1.6;padding-left:7px;padding-right:7px}*+html .k-button-expand{margin-left:0;margin-right:0}button.k-button::-moz-focus-inner,input.k-button::-moz-focus-inner{padding:0;border:0}a.k-button-expand{display:block}button.k-button-expand,input[type="submit"].k-button-expand,input[type="button"].k-button-expand,input[type="reset"].k-button-expand{width:100%}body .k-button-icon{padding-left:4px;padding-right:4px}*+html...
JavaScript
$(document).ready(function() {
type: "odata",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://203.206.228.211:4871/api/requests.php?apikey=12345&op=departmentTickets",
dataType: "jsonp",
},
},
batch: false,
pageSize: 30,
schema: {
model: {
id: "ticketno",
fields: {
ticketno: { editable: false, nullable: true },
contractnumber: { validation: { required: true } },
product: {},
ticketopener: {},
ticketclosed: {type: "boolean"}
}
}
}
});
staff = new kendo.data.DataSource({
transport: {
read: {
url: "http://203.206.228.211:4871/api/requests.php?apikey=12345&op=getStaff",
dataType: "jsonp"
},
},
Schema: {
model: {
id: "value",
fields: {
value: {type:"number"},
text: {type:"string"},
}
}
}
});
...