Allow Editing When Creating New Records for the New Records Only
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | 2020.3.1021 |
Description
How can I allow user input for a specific field when adding a new row and prevent user input for existing rows?
Solution
Based on the id
value of the Model, conditionally determine an editable column.
To control the editing capability of the column, the column editable
property accepts a function. In the following code snippet, based on the ProductID
value, an isEditable
function returns a Boolean value. If the value is null
, the Grid will add a new record—the value will not be added until the Grid saves its changes. If a value is not null
, the Grid will update an existing record.
var dataSource = new kendo.data.DataSource({
...
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
...
}
}
}
});
$("#grid").kendoGrid({
...
columns: [
{ field: "ProductName", editable: isEditable},
...
]
});
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
//If the id(ProductID) is null, then it is editable.
return e.ProductID == null;
}
The following example demonstrates how, upon creating a new record, ProductName
and UnitPrice
become editable. When the user updates an existing record, ProductName
and UnitPrice
become read-only.
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
/*
ProductName and UnitPrice will be only editable
upon adding a new record.
*/
{ field: "ProductName", editable: isEditable},
{ field: "UnitPrice", editable: isEditable, title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
// If the id(ProductID) is null, then it is editable.
return e.ProductID == null;
}
</script>