我希望我的Kendo网格列在绑定后只读。我的页面中有一个下拉列表。根据下拉列表的选定值,我想启用编辑所选行中的单元格。
有没有人有示例代码?
答案 0 :(得分:0)
可以实现如下所需的行为:
使用Grid的edit
事件,检查DropDownList value()
,如果应该阻止编辑,请执行Grid的closeCell()
方法退出编辑模式。如果用户正在尝试向网格添加新项目(e.model.isNew()
),您还需要使用相应的remove()
方法dataSource
这个新项目。
使用DropDownList的change
事件,使用自定义CSS样式隐藏Grid中与CRUD相关的按钮。
另一个可能的选择是每次dropDownList值改变时,通过setOptions
使用正确的编辑设置重新创建和重新绑定网格。
以下示例使用上述第一种方法。您可以修改它,这样不仅可以切换删除按钮,还可以添加新记录。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing/">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title>Kendo UI</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
<style>
.hideDeleteButtons .k-grid-delete {
visibility: hidden;
}
</style>
</head>
<body>
<div id="example">
<p><label for="dropdownlist">Grid editing is:</label>
<select id="dropdownlist"><option value="1">enabled</option><option value="0">disabled</option></select></p>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#dropdownlist").kendoDropDownList({
change: function(e) {
$("#grid").toggleClass("hideDeleteButtons", e.sender.value() !== "1");
}
});
var crudServiceBaseUrl = "//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: 10,
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,
navigatable: true,
pageable: true,
height: 300,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ command: "destroy", title: " ", width: 200 }],
editable: true,
edit: function(e) {
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
if (dropdownlist.value() !== "1") {
e.sender.closeCell();
if (e.model.isNew()) {
e.sender.dataSource.remove(e.model);
}
}
}
});
});
</script>
</div>
</body>
</html>