Telerik Kendo UI grille: regroupement et de tri de survivre grille.refresh() mais s'est effondré groupes obtenir étendue; comment préserver l'état

Il est compréhensible que ce n'est pas une fonctionnalité intégrée. C'est assez compliqué parce que si vous avez des groupes imbriqués, vous devrez vous souvenir de chaque groupe s'est effondré dans la hiérarchie qu'il a existé dans. Depuis que les articles seront se déplaçant dans et hors de la source de données, ce serait une douleur à la piste.

---

Cela dit, voici une très hackish façon d'accomplir ce que vous voulez, tant que vous ne soyez pas trop compliqué. Il utilise juste le groupHeaderTemplate propriété pour ajouter un UID pour chaque ligne de regroupement. Je suis juste en utilisant le nom de la colonne + valeur de l'UID, ce qui est techniquement faux si vous obtenez dans plusieurs regroupements, mais il est assez bon pour un exemple.

À partir de là, avant de vous rafraîchir, vous pouvez trouver l'effondrement des groupes à partir de l'attribut ARIA qui Kendo a maintenant (note, vous devez être en utilisant 2012 T3 pour que cela fonctionne). Puis de forage vers le bas et obtenir le liquide qui a été ajouté par le modèle.

Après l'actualisation, vous pouvez trouver les lignes avec un UID et les passer à la grille de l' .collapseGroup() fonction re-effondrement.

Ici, c'est un travail jsFiddle que le démontre.

Et le code de la jsFiddle copier/coller dans (veuillez noter que je n'définir le modèle sur la Ville de la colonne, de sorte que seule la Ville de la colonne sera de préserver le groupement d'effondrement dans cet exemple!):

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

---

Personnellement, je n'aime pas cette solution. Il est trop hacky et beaucoup trop de DOM traversée. Cependant, sans re-mise en œuvre de la grille de widget que je ne peux pas penser à une meilleure façon de le faire. Il sera peut-être assez bon pour ce que vous essayez d'accomplir, ou de vous donner une meilleure idée.

---

Une dernière remarque, je l'ai vérifié le Kendo UI code source et il ne semble pas en voie de regroupements élargie et s'est effondré. Ils font quelque chose de semblable à ce que j'ai fait avec l'attribut aria, mais au lieu de vérifier la classe que les lecteurs de l'icône d'état:

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

Si vous n'êtes pas à l'aide de Kendo 2012 T3 et ne peut pas utiliser l'aria-élargi attribut, vous pouvez modifier le code pour vérifier la classe d'une icône à la place.

OriginalL'auteur CodingWithSpike

J'ai commencé un solide groupe de l'état de préservation de l'extension du réseau qui est conçu pour fonctionner avec les deux Kendo Grille et ASP.Net RadGrid (contrôle des implémentations spécifiques qui utilisent la fonctionnalité commune).

Cette extension permet des améliorations significatives à Telerik du groupe de l'état de conservation exemple et améliore RadGrid, pour qui rien d'autre disponible en vient même à proximité du Kendo UI exemple. Vous pouvez voir la liste des améliorations ici, et vous pouvez vérifier le code ici.

J'aimerais savoir ce que vous en pensez.

OriginalL'auteur Andre Light