Kendo UI Grid incell editing
Kendo UI Grid incell editing with 'values' column
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="grid"></div>
CSS
td {
white-space: nowrap;
}
JavaScript
var savings = [
{ CompanyId: "1", CompanyName: "Company 1", DiscountPercentageMRC: 10,CatalogProductId:100 },
{ CompanyId: "2", CompanyName: "Company 2", DiscountPercentageMRC: 20,CatalogProductId:200 } ];
var savingsDataSource = new kendo.data.DataSource({
data: savings,
schema: {
model: {
id: "CompanyId",
fields: {
"CompanyId": { type: "number" },
"CompanyName": { type: "string" },
"DiscountPercentageMRC": { type: "number" },
"CatalogProductId": { type: "number" }
}
}
}
});
$(function() {
$("#grid").kendoGrid({
pageable: true,
sortable: true,
filterable: true,
//toolbar: ["create", "save", "cancel","edit"], // specify toolbar commands
dataSource: savingsDataSource,
columns:[
{ field: "CompanyId", title: "CompanyId" },
{ field: "CompanyName" },
{ field: "DiscountPercentageMRC" },
{ field: "CatalogProductId" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }
],
editable: "inline",
edit: OnEdit,
selectable:true
});
});
function OnEdit(e) {
if (!e.model.isNew()) { // Make sure it's not a new entry
var catalogproductid = e.container.find("input[name=CatalogProductId]").data("kendoNumericTextBox").value();
if(catalogproductid == 100) {
var disableField = e.container.find("input[name=DiscountPercentageMRC]").data("kendoNumericTextBox");
disableField.enable(false);
}
}
}