2015-04-14 47 views
0

我試圖在kendo UI的treelist上的列上創建一個鎖。如果用戶點擊一個按鈕,它會鎖定在樹形列表一欄,我想是這樣的:kendo ui treelist - 鎖定列

<!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功能提供了控制檯上的錯誤,它不是產生於樹形列表任何鎖:

TypeError: d is undefined    kendo.all.min.js:53:29331 

http://dojo.telerik.com/elipA

lockColumn API:http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist

回答