代码之家 › 专栏 › 技术社区 › Robert Dougan

当autoBind设置为false时,如何在剑道UI网格中隐藏寻呼机?

kendo-grid kendo-ui javascript

Robert Dougan · 技术社区 · 7 年前

我有一个剑道UI网格,它的“自动绑定”属性设置为false。我还将“pageable.alwaysVisible”属性设置为false,以便在不需要时隐藏网格的寻呼机。

我遇到的问题是,由于网格在第一次加载时没有数据绑定,“alwaysVisible”属性不起作用,因此会显示寻呼机。在这个阶段,我希望寻呼机是隐藏的,因为没有数据被寻呼。

当网格没有数据绑定时,我是否可以在第一次加载时隐藏寻呼机?

3 回复 | 直到 7 年前

Joe Glover 7 年前

它看起来不像你想要的是现成的,但是你可以使用一些CSS来实现它。这可能是一个比我之前的答案更好的方法,它本质上触发了网格绑定自身。在网格最终绑定之前,先隐藏寻呼机如何,此时它将接管寻呼机可见性的管理?

<style>
  #grid>.k-pager-wrap.k-grid-pager {
    display: none;
  }
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" }
    ],
    pageable: {
      pageSize: 3,
      alwaysVisible: false
    },
    autoBind: false
  });
</script>

https://dojo.telerik.com/EBaZAjAc

Joe Glover 7 年前

当它不知道自己还没有数据时,这看起来像是网格的一个怪癖。也许您可以尝试在第一个实例中将“no data”推入您的数据源中?下面的代码片段演示了您的问题;取消对最后一行的注释可以修复它:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: new kendo.data.DataSource(),
        pageable: {
            pageSize: 5,
            alwaysVisible: false
        },
        autoBind: false,
    });
    //$("#grid").data("kendoGrid").dataSource.data([]);
</script>

示例如下: https://dojo.telerik.com/OZAXugOt

Rico Koldi 7 年前

你可以这样使用:

dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
  e.sender.pager.element.hide();
} else {
  e.sender.pager.element.show();
}

看看这个例子: http://dojo.telerik.com/OhEDo