JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://www.stjernegaard.net/wpDKMA.css">
<link rel="stylesheet" href="http://www.stjernegaard.net/priceperiod.css">
<link rel="stylesheet" href="http://www.stjernegaard.net/rime.css">
<link rel="stylesheet" href="http://www.stjernegaard.net/bigTable.css">
<link rel="stylesheet" href="http://www.stjernegaard.net/common.css">
<div id="grid"></div>
<script type="text/x-kendo-template" id="toolbar-template">
<div class="toolbar">
<a href="parallelImport" id="reset-filter-button" class="k-button k-button-icontext">
foo
</a>
</div>
</script>
CSS
#drugsgrid .k-toolbar {
min-height: 27px;
}
.reset-filter-label {
padding-right: 0.5em;
vertical-align: middle;
}
#reset-filter-button {
vertical-align: middle;
}
.toolbar {
margin-right: -22.2em;
}
JavaScript
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
pageSize: 50,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
}
},
height: 200,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "OrderID" },
{ field: "ShipName" }
],
toolbar: kendo.template($("#toolbar-template").html())
});