如何在过滤后在kendo ui网格上显示水平滚动条？

我有一个有很多列的kendo UI网格。溢出的列可以通过水平滚动查看。但是，如果如何在过滤后在kendo ui网格上显示水平滚动条？

1）滚动到最初不显示一列并

2）该列过滤，使得没有行匹配筛选条件

网格将不再允许水平滚动。应用过滤器的列无法清除。

如何在过滤后显示水平滚动条？

这里有一个的jsfiddle在这里你可以看到这个问题

下面的代码：

var dataItem = {}; 
var columns = []; 

for (var i = 0; i < 20; i++) { 
    dataItem['col' + i] = i; 
    columns.push({ 
     field: 'col' + i, 
     width: 80, 
     filterable: true, 
     type: 'number' 
    }); 
} 

$("#grid").kendoGrid({ 
    scrollable:true, 
    columns: columns, 
    filterable: true, 
    dataSource: [dataItem] 
});

例如，去列18和过滤器上等于20，看问题。

来源

2013-02-12 James

有趣的delima。我认为你最简单的答案是在网格旁边添加一个按钮来“刷新”网格。以下JavaScript将导致刷新。

function LoadAllPositions() { 
    $("#grid").data("kendoGrid").dataSource.read(); 
}

来源

2013-02-13 20:05:38

感谢您的回答。我试图用你的想法更新我的jsfiddle，并且水平滚动条似乎不再出现。因此，第x列到第n列（其中x是显示器最后一个可见列，当完全向左滚动和n（是网格的最后一列）仍然无法清除过滤器，或者您是否建议重新加载原始数据？如果前者，你能请更新/分叉演示这个工作吗？如果后者，那么我认为用户体验会相当差，要求他们采取这个行动。 – James 2013-02-13 22:50:33

但我想它是两个中的较小者邪恶。 – James 2013-02-13 22:50:59

@OnaBai，非常好。 – 2013-02-15 15:09:41

基础上，增加一个清晰过滤器按钮的三分球Gramman方法：

$("#grid").kendoGrid({ 
    scrollable: true, 
    columns : columns, 
    filterable: true, 
    toolbar : [ 
     { 
      name  : "clean_filter", 
      imageClass: "k-icon k-i-funnel-clear", 
      text  : "clean filter" 
     } 
    ], 
    dataSource: [dataItem] 
}); 

$(".k-grid-clean_filter", "#grid").on("click", function (e) { 
    $("#grid").data("kendoGrid").dataSource.filter({}); 
});

看到它运行here。

它不能解决滚动标题的问题，但至少可以让你继续（如果没有找到更好的东西）。

来源

2013-02-15 00:14:45 OnaBai

我有同样的问题，我解决了它向网格添加一个空行。
代码：

var dataItem = {}; 
var columns = []; 

for (var i = 0; i < 20; i++) { 
    dataItem['col' + i] = i; 
    columns.push({ 
    field: 'col' + i, 
    width: 80, 
     filterable: true, 
     type: 'number' 
    }); 
} 

$("#grid").kendoGrid({ 
    scrollable:true, 
    columns: columns, 
    filterable: true, 
    dataSource: [dataItem], 
    dataBound: function(e) { 
     if(this.dataSource.view().length == 0) { 
      var colspan = this.content.find("table col").length; 
      this.content.find("table").append("<tr><td colspan=" + colspan + "></td></tr>"); 
     } 
     $("#grid").find(".k-grid-footer-wrap").scrollLeft($("#grid").find(".k-grid-content").scrollLeft());   
     this.content.bind('scroll', function() { 
      $("#grid").find(".k-grid-footer-wrap").scrollLeft(this.scrollLeft); 
     }); 
    } 
})

来源

2013-06-28 14:24:05 Gonzalo

如何在过滤后在kendo ui网格上显示水平滚动条？

回答

相关问题