Question

kendo ui grid不支持冻结列。如果有人可以为kendo网格冻结列的自定义脚本提供帮助，我将不胜感激。有什么建议吗？

列：[]

Answer 1

Kendo UI Grid将在下一个正式版本 - 2014年第一季度支持冻结列。在此之前，我能给你的最佳建议是使用两个绑定到同一数据源的网格。

var dataSource = new kendo.data.DataSource({
  /* snip */  
});

$("#frozen").kendoGrid({
  dataSource: dataSource,
  columns: [
    "OrderID"
  ],
  height: 200,
  sortable: true
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  height: 200,  
  columns: [
    { field: "Freight", width: 100 },
    { field: "ShipName", width: 200 },
    { field: "OrderDate", width: 200, format: "{0:d}" },
    { field: "ShipCity", width: 200 }
  ],
  sortable: true
});

这和一些CSS魔法会模拟冻结的列外观：http://jsbin.com/uCEQOCi/1/edit

但有一点需要注意。只有弹出编辑模式才能在这种情况下工作。

Answer 2

我认为在2020.1.219中的新版本中，是否存在锁定的属性。

锁定：Example - locked columns

<div id="grid"></div>

JS：

<script>
 $("#grid").kendoGrid({
  columns: [
   { locked: true, field: "id", width:200 },
   { field: "name", width:800 }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

Answer 3

在下面的代码中，您可以了解冻结列

<div id="kendogrid" data-bind="kendoGrid: {  data: SearchResults, schema: { model: { fields: { DateOfBirthSortable: { type: 'date' }}}}, pageable:{pageSize: 15} ,selectable:'row',reorderable: true, navigatable:true, sortable: true,resizable: true,filterable: true,groupable: true,columnMenu: true,navigatable: true, 
                                    columns: [  { field: 'UniqueID', title : 'Id' , width:50,locked: true,lockable:false,event:{change:DoSearch}},
                                                { field: 'Salutation', title : '#',width:80,locked: true, template:'<span> #if(Salutation != null) {# <span> #= Salutation #</span> # } #</span>'  },
                                                { field: 'FirstName', title : 'First Name',  width:150,locked: true, },
                                                { field: 'LastName', title : 'Last Name',width:150,locked: true, template:'<span> #if(LastName != null) {# <span> #= LastName #</span> # } #</span>'  },
                                                { field: 'Mobile', title : 'Mobile' ,width:100, template:'<span>#if(Mobile != null) {# <span>#=Mobile #</span> #}# </span>' }, 
                                                { field: 'Phone', title : 'Phone',width:100, template:'<span>#if(Phone != null){#<span>#= Phone#</span> #}# </span>'  },
                                                { field: 'Email', title : 'Email',width:200, template:'<span>#if(Email != null){#<span>#= Email#</span> #}# </span>'  },
                                                { field: 'DateOfBirthSortable', title : 'DOB',width:100,format: '{0: MM/dd/yyyy }',filterable:{ui: 'datepicker'} ,template:'<span> #if(DateOfBirth != null) {# <span> #= DateOfBirth #</span> # } #</span>'  },
                                                { field: 'AddressLine1', title : 'AddressLine1', width:150, template: '<span >#if(AddressLine1 != null){#<span>#=AddressLine1 #</span> #} # </span>'  },
                                                { field: 'AddressLine2', title : 'AddressLine2',  width:150, template: '<span > #if(AddressLine2 != null){# <span>#=AddressLine2 # </span> #} # </span>'  },
                                                { field: 'City', title : 'City',  width:100, template: '<span >#if(City != null){#<span>#=City #</span>  #} # </span>'  },
                                                { field: 'State', title : 'State',  width:100, template: '<span >#if(State != null){#<span>#=State #</span> #} #</span>'  },
                                                { field: 'Country', title : 'Country',  width:100, template: '<span >#if(Country != null){#<span>#=Country #</span>  #} #</span>'  },
                                                { field: 'Zip', title : 'Zip',  width:100, template: '<span >#if(Zip != null){#<span>#=Zip #</span>  #} #</span>'  }
                                                ],change: onChange}">
                                    </div>

你必须包含“columnMenu：true和scrollable：true”，然后你必须为每一列定义宽度。

Kendo UI网格冻结列

3 个答案: