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

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

i have kendo ui grid many columns. columns overflow can viewed scrolling horizontally. however, if

1) scroll column not displayed and

2) filter on column such no rows match filter criteria

the grid no longer allow scrolling horizontally. column had filter applied cannot cleared.

how can show horizontal scrollbar after such filtering?

here's jsfiddle can see issue

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

here's code:

class="lang-js prettyprint-override">var dataitem = {}; var columns = []; (var = 0; < 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 column 18 , filter on equal 20 see issue.

i had same problem, solved adding empty row grid. code:

class="lang-js prettyprint-override">var dataitem = {}; var columns = []; (var = 0; < 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); }); } })

filter grid kendo-ui