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

Question

我有一个包含许多列的剑道 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 来查看问题。

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