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

Posted 2023-05-07

【中文标题】过滤后如何在剑道 ui 网格上显示水平滚动条？

【英文标题】：How can I show the horizontal scrollbar on a kendo ui grid after filtering?

【发布时间】：2013-01-27 06:56:31

【问题描述】：

我有一个包含许多列的剑道 UI 网格。溢出的列可以通过水平滚动来查看。但是，如果你

1) 滚动到最初未显示的列并

2) 对该列进行过滤，以使没有符合过滤条件的行

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

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

这是一个 jsfiddle，您可以在其中看到问题

http://jsfiddle.net/9sxkG/1/

代码如下：

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 以查看问题。

【参考方案1】：

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

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);
        );
    
)

【参考方案2】：

基于 Trey 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。

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

【参考方案3】：

有趣的德利马。我认为您最简单的答案是在网格旁边添加一个按钮以“刷新”网格。以下 javascript 将导致刷新。

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

【讨论】：

感谢您的回答。我试图用你的想法更新我的 jsfiddle，水平滚动条似乎没有重新出现。因此，第 x 列到第 n 列（其中 x 是完全向左滚动时显示屏上的最后一个可见列，而 n（是网格的最后一列）仍然无法访问以清除过滤器。或者您是否建议重新加载原始数据？如果是前者，你能否更新/分叉小提琴来证明这个工作？如果是后者，那么我认为用户体验会很差，要求他们采取这个行动。

但我想这是两害相权取其轻。