kendo grid inline edit
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>
CSS
* {
font-family: Verdana, sans-serif;
font-size: 12px;
}
#grid tbody tr:hover {
background: #8b0000;
color: white;
}
JavaScript
function getRequiredMessage(input) {
return "User name is required";
//debugger;
return "Rajeev";
if (input.is("[name=username]")) {
return "User name is required";
}
else
return input.attr("name") + " Field is Required";
}
function lowerThanHighest(input) {
// alert(input);
input.attr("data-FirstName-msg", "Lowest must be lower than Highest");
return true;
}
$("#grid").kendoGrid({
dataSource: {
data : createRandomData(50),
pageSize: 10,
schema : {
model: {
fields: {
id : { type: 'number'},
FirstName: { type: 'string', validation: {required:
function(input) { lowerThanHighest(input); }
}},
LastName : { type: 'string' },
City : { type: 'string' },
Title : { type: 'string' },
BirthDate: { type: 'date' },
Age : { type: 'number' }
}
}
}
},
editable : "incell",
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{
field: "FirstName",
width: 90,
title: "First Name"
} ,
{
field: "LastName",
width: 90,
title: "Last Name"
} ,
{
width: 100,
field: "City"
} ,
{
field: "Title"
} ,
{
field : "BirthDate",
title : "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
} ,
{
width: 50,
field: "Age"
}
]
});