如何在筛选Kendo UI网格后显示水平滚动条？

Question

我有一个带有许多列的kendo 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以查看问题。

- James

Answer 1

基于 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({});
});

在这里可以看到它的运行链接。

它不能解决滚动标题的问题，但至少允许你继续（如果没有更好的解决方案）。

- OnaBai

Answer 2

我曾经遇到过同样的问题，解决方法是在网格中添加一个空行。
代码：

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

- Gonzalo

Answer 3

有趣的困境。我认为最简单的解决方法是在网格旁边添加一个“刷新”按钮。以下JavaScript将导致刷新。

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

- Trey Gramann

---

谢谢您的回答。我尝试使用您的想法更新我的JSFiddle，但水平滚动条似乎并没有重新出现。因此，从列x到列n（其中x是完全向左滚动时您的显示器上最后可见的列，n是网格的最后一列）仍然无法访问以清除过滤器。或者您是否建议重新加载原始数据？如果是前者，您能否更新/分支Fiddle以演示这个工作？如果是后者，那么我认为需要用户采取这种行动将会导致非常糟糕的用户体验。 - James

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