JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div class="k-content dataControlSection">
<div class="leftDataColumn">
<div id="gridGoesHere">
</div>
</div>
<div class="rightButtonColumn">
<button class="k-button">
<span class="k-icon k-add"></span>
New update...
</button>
</div>
</div>
CSS
div.dataControlSection
{
overflow:auto;
}
div.leftDataColumn
{
float:left;
width:auto;
}
div.rightButtonColumn
{
float:left;
margin-left:24px;
}
JavaScript
$(function() {
$('#gridGoesHere').kendoGrid({
columns: [
{
field: "Id",
title: " ",
width: 50,
template: "<button class='k-button deleteVersionButton' onclick='return false' style='min-width:25px'><span class='k-icon k-delete' /></button><input type='hidden' value='#= Id #'/>"
},
{
field: "Version",
title: "Version",
width: 100,
template: "#= Version #"
},
{
field: "Description",
title: "Description"
}
],
dataSource: [
{
Id: 8,
Version: '1.0.3.910',
Description: 'This should add entries to the start menu'
},
{
Id: 9,
Version: '1.0.3.943',
Description: 'Allows for restarting via the file downloader'
}
]
});
});