Telerik Kendo UI grid: gruppieren und Sortieren überleben raster.refresh () -, sondern stürzte Gruppen erweitert; how to preserve state

Ist es verständlich, dass dies nicht ein built-in feature. Es ist ziemlich kompliziert, denn wenn man verschachtelte Gruppierungen, Sie hätte sich zu erinnern, jede reduzierte Gruppe in der Hierarchie, dass es existierte. Da sich die Gegenstände bewegen, in die und aus der DataSource, das wäre ein Schmerz zu verfolgen.

Gesagt, hier ist ein sehr hackish Weg, das zu erreichen, was Sie wollen, solange Sie nicht zu kompliziert. Es verwendet einfach die groupHeaderTemplate Eigenschaft hinzufügen, um eine UID zu jeder Gruppierung Zeile. Ich bin gerade über die Spalte name + Wert, wie die UID, das ist technisch falsch, wenn man in mehrere Gruppierungen, aber es ist gut genug für ein Beispiel.

Von dort aus, bevor Sie aktualisieren, finden Sie die zusammengelegten Gruppen aus dem ARIA-Attribut, Kendo hat nun (nebenbei bemerkt, Sie haben zu verwenden, die 2012 Q3 für diese zu arbeiten). Dann bohren Sie nach unten und Holen Sie sich die UID, die Hinzugefügt wurde, durch die Vorlage.

Nach der Aktualisierung, können Sie die Zeilen mit einem passenden UID und geben Sie Sie in das raster .collapseGroup() Funktion zu re-reduzieren.

Hier ist eine funktionierende jsFiddle veranschaulicht dies.

Und den code aus dem jsFiddle copy/Paste in (bitte beachten Sie, dass ich nur legen Sie die Vorlage auf die Spalte City, also nur die Stadt, die Spalte wird beibehalten Gruppierung Zusammenbruch in diesem Beispiel!):

HTML:

<button id="refresh">Refresh</button>
<div id="grid" style="height: 380px"></div>

JavaScript:

var _getCollapsedUids = function () {
    var collapsedUids = [];
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($(item)
               .closest(".k-grouping-row")
               .children("td:first")
               .attr("aria-expanded") === "false") {
                collapsedUids.push($(item).data("uid"));
            }
        }
    );
    return collapsedUids;
};

var _collapseUids = function (grid, collapsedUids) {
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($.inArray($(item).data("uid"), collapsedUids) >= 0) {
                console.log("collapse: " + $(item).data("uid"))
                grid.collapseGroup($(item).closest("tr"));
            }
        }
    );
};

var refresh = function () {
    var collapsedUids = _getCollapsedUids();
    var grid = $("#grid").data().kendoGrid;
    grid.dataSource.data(createRandomData(50));
    _collapseUids(grid, collapsedUids);
};

$("#refresh").click(refresh);

$("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50),
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [ {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } , {
            field: "LastName",
            width: 90,
            title: "Last Name"
        } , {
            width: 100,
            field: "City",
            groupHeaderTemplate: '<span data-uid="City-#=value#">#= value #</span>'
        } , {
            field: "Title"
        } , {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        } , {
            width: 50,
            field: "Age"
        }
    ]
});

Ich persönlich weiß nicht wirklich, wie diese Lösung überhaupt. Es ist viel zu hacky und viel zu viel DOM-traversal. Allerdings ohne re-Implementierung des grid-widgets, ich kann nicht denken, einen besseren Weg, es zu tun. Vielleicht wird es gut genug sein für das, was Sie versuchen zu erreichen, oder geben Sie eine bessere Idee.

Eine Letzte Anmerkung; ich habe die Kendo-UI-source-code und es wird nicht angezeigt, zu verfolgen, welche Gruppierungen sind erweitert/reduziert. Sie tun etwas ähnlich, was ich mit dem aria-Attribut, sondern überprüfen Sie das Klasse, treibt die Symbol-Zustand:

            if(element.hasClass('k-i-collapse')) {
                that.collapseGroup(group);
            } else {
                that.expandGroup(group);
            }

Wenn Sie nicht mit Kendo 2012 Q3 und können nicht das aria-Attribut erweitert, Sie könnte sich ändern, den code zu überprüfen, das Symbol der Klasse statt.

InformationsquelleAutor CodingWithSpike

Habe ich begonnen, eine robuste Gruppe Stand die Erhaltung der grid-Erweiterung, die entworfen, um die Arbeit mit beiden Kendo-Grid-und ASP.Net RadGrid (control-spezifische Implementierungen nutzen, die gemeinsame Funktionalität).

Diese Erweiterung macht die erheblichen Verbesserungen, Telerik Gruppe state preservation Beispiel und verbessert RadGrid, für die nichts anderes verfügbar auch nur annähernd an die Kendo-UI-Beispiel. Sie können sehen, die Liste der Verbesserungen hier, und Sie können check out den code hier.

Ich würde gerne wissen, was Sie denken.

InformationsquelleAutor Andre Light