Come posso mostrare la barra di scorrimento orizzontale su una griglia di kendo ui dopo il filtraggio?

Question

Ho una griglia UI di kendo con molte colonne. Le colonne che escono possono essere visualizzate scorrendo orizzontalmente. Tuttavia, se si

1) scorre fino a una colonna non visualizzata inizialmente e

2) filtrata su quella colonna tale che nessuna riga corrispondono ai criteri di filtro

la griglia non consentire lo scorrimento orizzontale . La colonna con il filtro applicato non può essere cancellata.

Come è possibile visualizzare la barra di scorrimento orizzontale dopo tale filtraggio?

Ecco un jsfiddle dove si può vedere il problema

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

Ecco il codice:

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

Per esempio, andare a colonna 18 e filtro pari a 20 per vedere il problema .

Answer 1

Delima interessante. Penso che la tua risposta più semplice sia quella di aggiungere un pulsante accanto alla griglia per "aggiornare" la griglia. Il seguente javascript causerà l'aggiornamento.

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

Answer 2

Sulla base di Trey approccio Gramman di aggiunta di un pulsante filtro trasparente:

$("#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({}); 
}); 

vedere in esecuzione here.

Non risolve la domanda di intestazioni a scorrimento, ma almeno consente di continuare (se non si trova nulla di meglio).

Answer 3

Ho avuto lo stesso problema, l'ho risolto aggiungendo una riga vuota alla griglia.
Codice:

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