How can I show the horizontal scrollbar on a 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) scroll to a column that is not initially displayed and

2) filter on that column such that no rows match the filter criteria

the grid will no longer allow scrolling horizontally. The column that had the filter applied cannot be cleared.

How can I show the horizontal scrollbar after such filtering?

Here's a jsfiddle where you can see the issue

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

Here's 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 filter on equal to 20 to see the issue.

Answer 1

I had the same problem, I solved it adding a empty row to the grid.
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);
        });
    }
})