JSFiddle - React, Tailwind, and code Playground
HTML
<div id="list"></div>
JavaScript
<script>
<div class="tabstrip">
<ul>
<li class="k-state-active">
Attributes
</li>
</ul>
<div>
<div class="attributes"></div>
</div>
</div>
</script>
<script type="text/x-kendo-template" id="typeTemplate">
<div class="toolbar">
<label class="category-label" for="ciType">Show CIs by Type:</label>
<input type="search" id="ciType" style="width: 230px"></input>
</div>
</script>
<script>
$(document).ready(function() {
var listGrid = $("#list").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/listsAsJSON/getCIsAsJSON"
},
schema: {
data: "rows",
total:"total",
model: {
fields: {
id: { type: "String" },
ciName: { type: "String" },
environment: { type: "String" }
}}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#typeTemplate").html()),
sortable: true,
pageable:true,
groupable:true,
filterable: true,
detailInit:...