kendo grid row template column reordering

by valchev

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: 70%; 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>

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,
        rowTemplate: kendo.template($("#template").html()),
        columns: ["FirstName", "Title", "Age"]
    });
});