kendo Grid inserting at the end
by manoj
HTML
<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>
JavaScript
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(16),
pageSize: 10,
schema : {
model: {
fields: {
id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' },
Title : { type: 'string' },
BirthDate: { type: 'date' },
Age : { type: 'number' }
}
}
}
},
editable : {
mode: "incell"
},
sortable : true,
pageable : {
refresh : true,
pageSizes: true
},
toolbar : [
{
name: "my-create",
text: "Add new record"
}
],
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 },
{ field: "Title" },
{
field : "BirthDate",
title : "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
},
{ width: 50, field: "Age" }
]
}).data("kendoGrid");
$(".k-grid-my-create", grid.element).on("click", function (e) {
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());
});