Contrôle de l'ensemble du DataGrid avec des événements d'état

Le DataGrid dans l'interface utilisateur Telerik pour les événements de cycle de vie OnStateInit et OnStateChanged de Blazor vous donne un contrôle presque complet sur chaque partie de la grille. Apprenez à les utiliser dans ce didacticiel.

Le DataGrid dans Telerik UI pour les événements du cycle de vie de Blazor facilite à la fois la simplification et la centralisation des fonctionnalités qui, autrement, nécessiteraient un code plus complexe réparti sur plusieurs événements pour implémenter . Avant d'implémenter une fonctionnalité spécifique à une ligne ou à un bouton, vous devez toujours vérifier s'il serait plus facile de placer ce code dans l'un des événements du cycle de vie de la grille (par exemple, OnStateChanged, OnCreate, OnDelete, etc.).

Les deux plus puissantes de ces méthodes de cycle de vie sont celles qui vous permettent de gérer l'état de votre grille: OnStateInit et OnStateChanged. Ces deux méthodes vous permettent à la fois de réagir et de modifier l'état de la grille … qui est, fondamentalement, tout ce qui concerne la grille: quels filtres sont appliqués, quelle page est affichée, quelles lignes sont sélectionnées, quels regroupements sont en place, et plus. Deux événements vous permettent de gérer l’état de la grille lors du premier chargement de la grille (OnStateInit) et lorsque l’utilisateur interagit avec la grille (OnStateChanged).

Quelques informations techniques (n'hésitez pas à sauter ce paragraphe): J'ai créé le projet dans cet article en utilisant la version 2.12.0 des contrôles Telerik, Visual Studio 2019 preview (version 16.6.0 Preview 6.0) et ASP .NET Core 16.6.934 / Razor Language Tools 16.1.0 / WebAssembly 3.2.0 . La base de mon projet est le modèle d'application Telerik C # Blazor, utilisant le modèle d'application client vide. J'ai ajouté un DataGrid à la page Index.razor incluse dans le modèle. Je préfère conserver mon code et mon balisage dans des fichiers séparés, j'ai donc ajouté un fichier de classe Index.razor.cs à mon dossier Pages et l'ai marqué comme une classe partielle. Tout le code que vous voyez dans cet article provient de ce fichier C #.

Contrôle de la charge initiale de la grille: balisage

Pour démontrer le pouvoir de manipuler l'état de DataGrid lors de son chargement dans l'événement OnStateInit, considérez un scénario dans lequel ce composant qui affiche une liste d'employés est passé un employé spécifique. Dans ce scénario, au fur et à mesure que la grille s'initialise, la grille affiche la page qui inclut l'employé demandé et fait de cet employé la ligne actuellement sélectionnée. Lorsque le composant est affiché, l'employé demandé sera à la fois à l'écran et prêt à être modifié.

Mon balisage initial pour le DataGrid le lie à un champ appelé MyData qui contient la collection d'objets Employee, active plusieurs fonctionnalités (pagination, sélection et filtrage), définit la taille de la page sur un autre champ (intelligemment appelé pageSize), et configure un champ appelé theGrid pour me permettre de me référer à la grille à partir de mon code:

L'étape suivante consiste à lier une méthode que j'ai appelée GridInitializing à l'événement OnStateInit de la grille. Pour ce faire, et capturer l'objet GridStateEventArgs généré par l'événement, je dois définir l'attribut OnStateInit de la grille sur une expression lambda. Ce balisage supplémentaire ressemble à ceci:

     @ ref = "theGrid"
    OnStateInit = "(GridStateEventArgs  args) => GridInitializing (args)">

Contrôle de la charge initiale de la grille: Code

Une fois mon balisage pris en charge, je peux passer à mon fichier de classe et écrire du code. Tout d'abord, je configure les champs qui contiennent les données affichées par la grille (MyData), la taille de la page (pageSize) et le champ lié à l'attribut ref de ma grille (theGrid). J'ai chargé des données factices dans MyData dans le constructeur de ma classe et je l'ai omis ici:

 index de classe partielle
{
   IEnumerable  MyData;
   int pageSize = 10;
   TelerikGrid  theGrid;

Avec tout cela en place, je peux commencer à gérer l'état initial de la grille dans ma méthode GridInitializing. Je ne veux pas que ma méthode ralentisse le processus d’initialisation de la grille plus que nécessaire, j’ai donc déclaré la méthode comme async void. Le squelette de ma méthode GridIntializing ressemble à ceci:

 void GridInitializing (GridStateEventArgs  e)
{

}

Il y a beaucoup de choses que vous pouvez faire dans l'événement OnStateInit (par exemple, la documentation de cet événement montre comment charger l'état de votre réseau à partir du stockage local pour prendre en charge le traitement hors ligne). Cependant, comme le souligne la documentation, cette méthode est appelée car la grille est initiale izing donc il y a aussi certaines choses que vous ne pouvez pas faire dans l'événement (du moins, pas pour le moment).

Par exemple, la grille a une méthode GetState qui renvoie l'état complet de la grille… mais l'appel de cette méthode dans la méthode OnStateInit empêchera votre grille d'afficher ses données. Heureusement, cependant, il existe un moyen plus simple d'accéder à l'état de la grille que d'appeler la méthode GetState: le paramètre passé à votre méthode OnStateInit comprend une propriété GridState qui vous donne accès à l'état de la grille (cependant, même en lisant certaines propriétés de la propriété GridState dans OnStateInit — la propriété Width sur un ColumnState, par exemple, empêchera également la grille d'afficher ses données).

Pour que la grille s'affiche et sélectionner un employé spécifique, je dois faire trois choses:

• Rechercher l'employé correspondant dans la collection affichée dans la grille (j'ai écrit une petite méthode d'aide qui renvoie à la fois l'objet correspondant et sa position dans la collection)
• Définissez la grille pour afficher la page sur laquelle apparaît l'employé
• ligne dans la grille la ligne actuellement sélectionnée

Et cela ne prend que quatre lignes de code dans l'événement OnStateInit. Tout d'abord, je dois appeler ma méthode d'assistance pour obtenir l'objet et sa position:

 Employee sd;
index int = FindIndex (nom sélectionné, sortie sd);

Ensuite, je calcule le numéro de page à partir de la position de l'élément et l'utilise pour définir la page à afficher lorsque la grille finit de s'initialiser:

 e.GridState.Page = (int) Math.Ceiling (((decimal) index / pageSize));

Enfin, pour faire de cet objet l'employé actuellement sélectionné, j'ajoute l'objet trouvé par ma méthode d'assistance à une collection que je pousse dans la collection SelectedItems de GridState:

 e.GridState.SelectedItems = new List  { Dakota du Sud };

Et j'ai terminé: lorsque la grille a fini de s'initialiser, l'employé demandé par l'utilisateur sera sur la page de la grille, affiché à l'utilisateur et déjà sélectionné.

Réponse aux changements d'état: balisage

Alors qu'OnStateInit vous permet de contrôler l'état initial de la grille, OnStateChange vous permet de gérer ce qui se passe lorsque l'utilisateur interagit avec la grille. La grille a une vue très large de ce qui compte comme un changement d'état – elle comprend non seulement la modification / l'ajout / la suppression d'objets dans la grille, mais également les modifications de la forme de la grille (regroupement) ou de la façon dont les objets sont affichés (tri / filtrage) et plus encore.

Bien que vous puissiez répondre à tous ces changements dans l'événement OnStateChange, dans une application particulière, vous ne vous soucierez probablement que de quelques-uns d'entre eux. Le problème ici est que la méthode d'événement OnStateChanged est souvent appelée . Par conséquent, si vous avez trop de choses à faire dans l'événement, il est possible d'avoir un impact sur les performances de la grille. Vous pouvez résoudre ce problème en exécutant d'abord votre méthode d'événement de manière asynchrone et, ensuite, en n'exécutant le code que lorsque vous en avez besoin.

À titre d'exemple de ce que vous pouvez faire dans OnStateChange, lorsque l'utilisateur sélectionne un employé dans la grille (un changement d'état), je filtre automatiquement la grille pour n'afficher que les employés du même service que l'employé sélectionné. Pour prendre en charge cela, je dois ajouter un GridCheckboxColumn à la grille pour permettre à l'utilisateur de sélectionner un employé et de déclencher le changement d'état (la sélection d'un employé ajoute également cet employé sélectionné à la collection SelectedItems de la grille).

Voici le balisage qui ajoute cette colonne avec certaines des autres colonnes de la grille:

… le reste des colonnes…

Ma première étape consiste à câbler une méthode à l'événement OnStateChanged de la grille. La syntaxe pour cela est très similaire à ce qui est requis dans l'événement OnStateInit:

 @ ref = "theGrid"
OnStateChanged = "(GridStateEventArgs  args) => GridChanging (args)" />

Contrôle de la charge initiale de la grille: code

Ces similitudes s’étendent au squelette de la méthode, qui accepte le même paramètre GridStateEventArgs que le gestionnaire d’événements OnStateInit. J'ai marqué la méthode comme asynchrone:

 async void GridChanging (GridStateEventArgs  e)
{

}

Ensuite, je vais vérifier si je dois faire quoi que ce soit. L'événement OnStateChanged est déclenché plusieurs fois avant que la grille ne soit complètement initialisée, donc je vois d'abord si la grille est prête à être utilisée en vérifiant le champ référençant la grille: si le champ n'est pas nul, la grille est prête.

Ma deuxième étape consiste à vérifier si le changement d'état m'intéresse. La propriété PropertyName sur le paramètre transmis à la méthode vous indiquera quelle partie de l'état de la grille a déclenché OnStateChanged. Dans mon cas, je souhaite agir lorsque PropertyName est défini sur «SelectedItems».

Enfin, je vérifie toutes les conditions pertinentes à votre action. Dans mon cas, l'état de SelectedItems changera à la fois si un objet Employee est ajouté à la collection SelectedItems et si un objet Employee est supprimé. Je veux seulement faire quelque chose si un employé est présent dans la collection, donc je vérifie le décompte des éléments sélectionnés.

Par conséquent, la première chose que je fais dans ma méthode est de m'assurer que toutes ces conditions sont remplies avant de le faire. n'importe quoi . Ce code ressemble à ceci:

 if (theGrid! = Null &&
    e.PropertyName == "SelectedItems" &&
    e.GridState.SelectedItems.Count> 0)
   {

   }

Ma prochaine étape consiste à récupérer l'objet Employee sélectionné dans la collection SelectedItems de GridState:

 {
   Employé sd = e.GridState.SelectedItems.First ();

La modification de l'état de la grille est assez simple: je crée un nouvel objet GridState, je modifie les parties de l'état qui m'intéressent, puis je fusionne mon GridState modifié dans l'état existant de la grille à l'aide de la méthode SetState de DataGrid.

Voici le code qui crée un objet GridState (appelé filteredState), puis ajoute un FilterDescriptor qui limite les lignes affichées à celles du même service que l'objet Employee actuellement sélectionné:

 GridState  filteredState = new GridState  ();
filteredState.FilterDescriptors = nouvelle liste  ()
                        {
                            nouveau FilterDescriptor () {Member = "Department",
                                                     Opérateur = FilterOperator.IsEqualTo,
                                                     Valeur = sd.Département,
                                                     MemberType = typeof (chaîne)
                                                   }
                        };

Pour déclencher le filtrage, il me suffit de fusionner cet état modifié dans l’état de la grille, en utilisant SetState. La méthode SetState est attendue donc, pour m'assurer que ma grille reste réactive, j'utilise SetState avec le mot clé await pour qu'elle s'exécute de manière asynchrone, comme ceci:

 await theGrid.SetState (filteredState);

Bien qu'il existe des méthodes de cycle de vie supplémentaires associées au DataGrid (OnUpdate, OnCreate, etc.) avec les événements OnStateInit et OnStateChanged, vous avez la possibilité d'aller au-delà de la gestion des données dans la grille pour gérer pratiquement toutes les autres parties de celle-ci .