如何在過濾後在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網格上顯示水平滾動條？

回答

相關問題