[英]kendo ui treelist - lock a column
I am trying to create a lock on a column on treelist in kendo UI. 我正在尝试在kendo UI中的树列表上的列上创建锁。 If user clicks on a button it will lock a column in the treelist, I tried like this :
如果用户单击按钮,它将锁定树形列表中的一列,我尝试这样做:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
$("button").click(function(){
var treelist = $("#treelist").data("kendoTreeList");
treelist.lockColumn("LastName");
});
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type: "number", nullable: false },
parentId: { field: "ReportsTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
reorderable: true,
resizable: true,
sortable: true,
filterable: true,
columnMenu: true,
columns: [
{
field: "FirstName",
expandable: true,
title: "First Name",
lockable: true,
width: 250
},
{
field: "LastName",
title: "Last Name",
lockable: true,
width: 200
},
{
field: "Position",
width: 400,
lockable: true
},
{
field: "Extension",
title: "Ext",
format: "{0:#}",
width: 150,
}
]
});
});
</script>
<style>
#treelist {
width: 950px;
}
</style>
</div>
</body>
</html>
lockColumn function gives the error on console and its not producing any lock on treelist : lockColumn函数会在控制台上显示错误,并且不会在treelist上产生任何锁定:
TypeError: d is undefined kendo.all.min.js:53:29331
http://dojo.telerik.com/elipA http://dojo.telerik.com/elipA
lockColumn API : http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist lockColumn API: http ://docs.telerik.com/kendo-ui/api/javascript/ui/treelist
Telerik Kendo UIs TreeList has a limitation in the column locking, which is that at least one column must be locked in the initialization phase for the programmatical column locking to work as per the documentation: "In order to use this method, the treelist must be initialized with at least one locked column, and should have unlocked columns left after the target column is locked.", source http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn . Telerik Kendo UIs TreeList在列锁定方面有一个限制,即在初始化阶段必须锁定至少一列,以使编程列锁定按照文档进行工作:“为了使用此方法,必须将树列表设置为初始化时至少要有一个锁定列,并且在锁定目标列之后应该还剩下未锁定的列。”,来源http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn 。
See corrected Dojo example here: http://dojo.telerik.com/@mrtaunus/iYeGI . 请参阅以下更正的Dojo示例: http : //dojo.telerik.com/@mrtaunus/iYeGI 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.