简体   繁体   English

kendo ui treelist-锁定列

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM