kendo grid row template column reordering
HTML
<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.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid" style="width: 50%; margin: 0 auto;"></div>
<script id="template" type="text/x-kendo-template">
# var columns = $("\\#grid").data("kendoGrid").columns #
<tr data-uid="#= uid #">
<td> #= data[columns[0].field] # </td>
<td> #= data[columns[1].field] # </td>
<td> #= data[columns[2].field] # </td>
</tr>
</script>
CSS
.k-grid td{
border-width: 0 1px 0 0;
}
.k-grid-header .k-header{
border-width: 0 1px 1px 0px;
}
JavaScript
var ds = new kendo.data.DataSource({
data: createRandomData(50),
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
Age: { type: "number" }
}
}
},
pageSize: 10
});
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: ds,
height: 450,
sortable: true,
reorderable: true,
resizable: true,
pageable: true,
columnResize : saveWidthOfColumns,
rowTemplate: kendo.template($("#template").html()),
columns: JSON.parse('[{"title":"FirstName","width":"31px"},{"title":"Title","width":null},{"title":"Age","width":null}]')
});
});
function saveWidthOfColumns(event) {
if (event.column.field == null) {
$("#grid colgroup").each(function() {
$(this).find(":nth-child(1)").css("width", "31px");
});
}
}
$(window).resize(function() {
resizeGrid();
});
function resizeGrid() {
var newWidth = $('body').innerWidth() - 20;
var oldWidth = $(".k-grid-content table").width() - 20;
if(oldWidth < newWidth)
{
$(".k-grid-content").css("padding-right", "18px");
$(".k-grid-content table").css("width",newWidth + "px");
$(".k-grid-header-wrap table").css("width",newWidth + "px");
}
}