[英]Make read-only rows on KendoUI TreeList
I'm making a KendoUI TreeList table and I need some rows to be read-only. 我正在制作一个KendoUI TreeList表,我需要一些行是只读的。
As the option does not exist by default, I'm trying to do this following this tutorial Here which works great on a KendoGrid, but not on my treelist. 由于默认情况下该选项不存在,因此我尝试在本教程此处进行操作 ,该教程在 KendoGrid上效果很好,但在我的树形列表上效果不佳。
I'm defining a template that creates an Edit button just for the rows that I marked as "readonly". 我正在定义一个模板,该模板仅为我标记为“只读”的行创建一个“编辑”按钮。
The buttons show up but nothing happens when I click on it... Has anyone an idea about why? 这些按钮显示出来,但是当我单击它时什么也没有发生...有人知道为什么吗?
Here is the sample that I made : http://dojo.telerik.com/EXupO/2 这是我制作的示例: http : //dojo.telerik.com/EXupO/2
Thank you for your help! 谢谢您的帮助!
Please try with the below code snippet. 请尝试使用以下代码段。 I have changed code of edit-template script. 我已经更改了编辑模板脚本的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
</div>
<script id="edit-template" type="text/x-kendo-template">
# if (!data.readonly) { #
<button data-command="edit" class="k-button k-button-icontext k-grid-edit"><span class="k-icon k-edit"></span>Edit</button>
# } #
</script>
<script>
$(document).ready(function () {
var editTemplate = kendo.template($("#edit-template").html());
var grid = $("#treelist").kendoTreeList({
dataSource: {
data: [{ DomainId: 1, Name: "Test", ReportsTo: null, readonly: true },
{ Name: "Categorie1", ReportsTo: 1, a: "10", b: "5" },
{ Name: "Categorie2", ReportsTo: 1, a: "10", b: "5" },
{ Name: "Categorie3", ReportsTo: 1, a: "10", b: "5" },
],
batch: true,
schema: {
model: {
id: "DomainID",
fields: {
parentId: { field: "ReportsTo", nullable: true, editable: false },
DomainID: { field: "DomainId", type: "number", editable: false },
Name: { validation: { required: true }, editable: false },
a: { type: "number", editable: true },
b: { type: "number", editable: true },
},
expanded: true
},
}
},
editable: true,
columns: [
{ field: "Name", title: "Domain", width: 400, editable: false },
{ field: "a", title: "1", filterable: false, sortable: false },
{ field: "b", title: "2", filterable: false, sortable: false },
{ field: "readonly", title: " ", width: 100, template: editTemplate, editor: function () { } }
],
editable: "popup",
pageable: true,
});
});
</script>
</body>
</html>
Let me know if any concern. 让我知道是否有任何问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.