How can I show the horizontal scrollbar on the kendo ui grid after filtering?

Question

I have a kendo UI grid with many columns. Columns that overflow can be viewed by scrolling horizontally. However, if you

1) select the column that is not initially displayed, and

2) filter in this column so that no rows match the filter criteria

the grid will no longer allow horizontal scrolling. The column on which the filter was applied cannot be cleaned.

How to show horizontal scrollbar after such filtering?

Here's the jsfiddle where you can see the problem

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

Here is the code:

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

For example, go to column 18 and set the filter to 20 to see the problem.

Answer 1

Based on Trey Gramman's approach of adding a filter filter button:

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

See how it works here .

It does not solve the issue of scrolling through the headers, but at least allows it to continue (if nothing is found).

Answer 2

I had the same problem, I decided that it was adding an empty row to the grid.
The code:

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

Answer 3

Interesting delicacy. I think your easiest answer is to add a button next to the grid to “refresh” the grid. The following javascript will cause the update.

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