kendo ui treelist - заблокировать столбец

Я пытаюсь создать блокировку столбца на treelist в пользовательском интерфейсе кендо. Если пользователь нажимает на кнопку, она будет блокировать столбец в 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 дает ошибку на консоли и ее не производить любой замок на TreeList:

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

источник

2015-04-14 Naveen

Telerik Кендо UIs TreeList имеет ограничение в замок колонке, whic h состоит в том, что по крайней мере один столбец должен быть заблокирован на этапе инициализации для блокировки программной колонки для работы в соответствии с документацией: «Чтобы использовать этот метод, treelist должен быть инициализирован хотя бы одним заблокированным столбцом и должен быть разблокирован столбцы, оставшиеся после блокировки целевого столбца »., источник http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn.

См. Исправленный пример Dojo здесь: http://dojo.telerik.com/@mrtaunus/iYeGI.

источник

2015-06-22 14:38:33

kendo ui treelist - заблокировать столбец

ответ

Смежные вопросы