Wie kann ich die horizontale Bildlaufleiste auf eine kendo ui grid nach der Filterung?

Ich habe einen kendo UI grid mit vielen Spalten. Spalten, überlauf angezeigt werden können, scrollen Sie horizontal. Allerdings, wenn Sie

1) scrollen Sie auf eine Spalte, die zunächst nicht angezeigt und

2) filter auf die Spalte, so dass keine Zeilen, die den Filterkriterien entsprechen

wird das raster nicht mehr erlauben einen horizontalen Bildlauf. Die Spalte, die der filter angewendet wurde, können nicht gelöscht werden.

Wie kann ich die horizontale scrollbar nach einer solchen Filterung?

Hier ein jsfiddle wo sehen Sie das Problem,

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

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

Zum Beispiel, gehen Sie zu Spalte 18 und filter auf gleich 20 zu sehen, die Problem.

InformationsquelleAutor James | 2013-02-12
  1. 2

    Ich hatte das gleiche problem, ich löste es, das hinzufügen einer leeren Zeile am raster aus.

    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);
        });
    }
})
    InformationsquelleAutor Gonzalo
  2. 2

    Basierend auf Trey Gramman-Ansatz für das hinzufügen eines clear-filter - Taste:

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

    Sehen, es läuft hier.

    Es löst nicht die Frage, scrolling-Header, aber zumindest erlaubt Sie weiterhin (wenn nichts besseres gefunden wird).

    InformationsquelleAutor OnaBai
  3. 1

    Interessante delima. Ich denke, Ihre einfachste Antwort ist, fügen Sie eine Schaltfläche weiter, um das Gitter zu 'aktualisieren' das Gitter. Der folgende javascript verursachen, dass das aktualisieren.

    function LoadAllPositions() {
    $("#grid").data("kendoGrid").dataSource.read();
}
    • Danke für die Antwort. Ich habe versucht, zu aktualisieren, mein jsfiddle mit Ihrer Idee und der horizontalen Bildlaufleiste scheint nicht wieder aufzutauchen. Also Spalte x bis Spalte n (wo x ist die Letzte sichtbare Spalte, die auf Ihre Anzeige, wenn es vollständig gescrollt werden Links und n (die Letzte Spalte der Tabelle) sind immer noch nicht zugänglich, um den filter zu löschen. Oder sind Sie darauf hindeutet, zum erneuten laden der ursprünglichen Daten? Falls ersteres, könntest du bitte update/Gabel Geige zu zeigen diese arbeiten? Wenn letzteres, dann denke ich, dass die user experience wäre ziemlich arm, zu verlangen, daß Sie diese Maßnahme ergreifen.
    • Aber ich nehme an, dass es das kleinere von zwei übeln.
    • sehr schön.
    InformationsquelleAutor Trey Gramann
Schreibe einen Kommentar