L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Utilisation du DataGrid sans liste
Vous pouvez utiliser Telerik DataGrid for Blazor avec n'importe quelle source de données en exploitant simplement l'événement OnRead.
Si vous avez les données pour lesquelles vous voulez le DataGrid dans Telerik UI for Blazor à gérer dans une liste, alors la plupart de votre travail est terminé. Mais même si vos données sont dans un autre format, tout ce dont vous avez besoin est du code dans la méthode OnRead pour lier vos données au DataGrid.
Par défaut, Telerik DataGrid for Blazor est conçu pour fonctionner avec une collection qui implémente le L'interface IList (ou l'une des interfaces dont elle hérite: ICollection et IEnumerable) et contient toutes les données à afficher. «Prêt à l'emploi», le DataGrid ne prend pas en charge d'autres sources de données.
Heureusement, la grille fournit l'événement OnRead dans lequel vous pouvez convertir la partie que vous souhaitez afficher dans la grille (généralement, l'équivalent d'une page de données ) dans le format préféré de la grille: une liste. Je vais vous montrer la technique à l'aide d'un dictionnaire, mais la structure de la solution est la même pour toutes les sources de données que vous pourriez vouloir lier au DataGrid.
Pour mon étude de cas, je vais supposer que mes données est dans un dictionnaire et que la clé du dictionnaire n'est pas une propriété de l'objet. Au lieu de cela, mon dictionnaire contient des objets Employé dont la clé est la date et l'heure à laquelle l'objet a été récupéré. Le dictionnaire serait chargé avec un code comme celui-ci:
Dictionary < int Employee > empData = new Dictionary < int Employé > () ;
emp = EmployeeRepostory . GetEmployee ( 492 ) ;
empData [ DateTime . Now ] = emp ;
Setting Up for Non-List Data
La première étape de faire fonctionner le DataGrid avec une source de données «non-liste» consiste à créer un objet et une collection avec lesquels la grille peut fonctionner. Pour mon exemple, j'ai créé cette nouvelle classe qui a toutes les propriétés de l'objet Employee et ajoute une nouvelle propriété pour contenir la clé sous laquelle l'objet est stocké (la date et l'heure actuelles dans mon exemple):
public class empGrid : Employé
{
public DateTime key { get ; set ; }
}
La deuxième étape consiste à lier une méthode à l'événement OnRead de la grille et à convertir le données de votre source de données «non-liste» (mon dictionnaire) dans une liste de votre nouvel objet.
L'événement OnRead est appelé lors du premier chargement de la grille et après chaque mise à jour des données (cela garantit que les valeurs affichées dans le grille sont à jour). Dans mon étude de cas, je vais associer l'événement OnRead à une méthode de mon code que j'ai appelée ReadingRows.
Cependant, si j'utilise la méthode OnRead, je dois également définir la propriété TotalCount de la grille. Dans mon cas, j'aurai récupéré tous mes objets Employee dans ma collection empData afin de pouvoir utiliser sa méthode Count pour définir l'attribut TotalCount de la grille. Si votre source de données n'a pas de membre Count ou Length, vous pouvez simplement lier l'attribut TotalCount de la grille à un champ et définir ce champ sur le nombre d'éléments à afficher.
J'ai besoin de définir quelques autres attributs sur la grille, cependant. Tout d'abord, je vais définir l'attribut PageSize de la grille sur un champ int dans mon code (que j'ai appelé pageSize). Je vais également devoir accéder à la grille elle-même, donc j'ai défini l'attribut @ref de la grille sur un autre champ (que j'ai appelé theGrid). Mon champ theGrid doit être déclaré comme TelerikGrid et lié au type d'objet que je vais afficher (ce serait mon objet empGrid).
Cela signifie que le balisage de ma grille ressemble maintenant à ceci:
Le début de mon code avec les champs dont j'ai besoin pour prendre en charge ce balisage ressemble à ceci:
TelerikGrid < empGrid > theGrid ;
IDictionary < DateTime Employee > empData = new Dictionary < DateTime Employee > () ;
IEnumerable < empGrid > pageData = new List < empGrid > () ;
int pageSize = 10 ;
Dans ce code, empData est ma source de données "hors liste" – pour le reste de ce message, je l'appellerai ma «source de données sous-jacente». La collection pageData est la liste avec laquelle la grille fonctionnera réellement. Il contiendra l'équivalent d'une page de données, extraites de la source de données sous-jacente dans l'événement OnRead au fur et à mesure que l'utilisateur parcourt les données en avant et en arrière.
Ce champ EOF n'est requis que si vous récupérez des données lorsque les pages utilisateur avancent , plutôt que de tout récupérer dès le départ, je vais donc remettre la discussion à plus tard.
Fabriquer la méthode OnRead
Dans la méthode OnRead, vous devez faire trois choses:
- Déterminez quelle page du grille est affichée (jusqu'où dans vos données l'utilisateur a paginé)
- Récupérez la valeur d'une page de données à partir de la source de données sous-jacente (mon dictionnaire empData)
- Convertissez-la en collection à laquelle la grille est liée (ma pageData List)
Pour saisir «l'équivalent d'une page de données», j'ai besoin de savoir combien d'objets la grille affiche dans une page. Étant donné que je contrôle le nombre d’éléments de la grille avec mon propre champ pageSize, c’est facile à déterminer.
La détermination de la page affichée par la grille est un peu plus délicate. En règle générale, vous pourrez récupérer le numéro de page à partir de la propriété Page de la grille. Cependant, la première fois que la méthode d'événement OnRead est appelée, la grille n'est pas disponible … ce qui vous indique que vous êtes sur la page 1 de la grille.
En utilisant le numéro de page et la taille de la page, je peux déterminer combien objets que je dois sauter pour accéder aux objets de la page en cours. Ce calcul est au début de ma méthode OnRead:
void ReadingRows ( GridReadEventArgs args )
{
int skip ;
if ( theGrid == null )
{
sauter = 0 ;
}
else
{
skip = ( theGrid . Page - 1 ) * pageSize ;
} [19659025] L'étape suivante consiste à récupérer les données d'une pageSize de ma source de données sous-jacente et à charger la collection à laquelle la grille est liée avec ces données. Étant donné que ma source de données sous-jacente est un dictionnaire, je peux simplement récupérer les bons KeyValuePairs du dictionnaire et créer mon objet empData à partir d'eux. Ce code charge la collection de la grille de mon dictionnaire:
pageData = empData . Skip ( skip ) . Take ( pageSize ) . Sélectionnez ( kvp = > new empGrid
{
clé = kvp . Clé
Id = kvp . Valeur . Id
Département = kvp . Valeur . Département
FullName = kvp . Value . FullName
HireDate = kvp . Valeur . HireDate
} ) ;
Le code dont vous aurez besoin pour charger la collection pageData dépendra de la nature de votre source de données sous-jacente.
Gestion des mises à jour, des suppressions et des insertions
Une fois que vous avez attaché une méthode à l'événement OnRead, vous devrez également écrire votre propre code pour gérer les mises à jour, les suppressions et les insertions. Cela signifie gérer (à tout le moins) les événements OnCreate, OnDelete et OnUpdate de la grille (pour en savoir plus sur ces événements, consultez mon article précédent . Vous devrez également ajouter à votre grille:
- A barre de commandes pour maintenir un bouton Ajouter qui appelle une méthode pour configurer la grille pour ajouter un nouvel élément.
- Boutons de commande de colonne pour gérer à la fois la suppression de lignes et la mise en mode d'édition (plus les boutons Enregistrer et Annuler à utiliser dans l'édition mode).
Cela signifie que le balisage de votre grille ressemblera à ceci:
Modifier
Supprimer
Mettre à jour
Annuler
Le code que vous allez mettre dans ces méthodes doit simplement mettre à jour votre source de données sous-jacente (empData, dans mon exemple). Votre méthode OnRead sera appelée après chaque mise à jour et vous avez déjà défini cet événement pour récupérer les données mises à jour d'une page à partir de la collection sous-jacente.
Avec un dictionnaire, le code pour gérer les suppressions est très simple. La méthode reçoit un objet GridCommandEventArgs dont le paramètre Item contient une copie de l'objet dans la ligne à supprimer. Je passe simplement à la propriété Remove du dictionnaire dans l'objet qui agit comme valeur clé du dictionnaire. Pour mon objet empGrid, c'est la propriété appelée key:
async void Deleting ( GridCommandEventArgs e )
{
empData . Supprimer ( ( ( empGrid ) e . Item ) . key ) ;
}
La méthode de mise à jour est presque aussi simple car, encore une fois, la méthode reçoit un objet GridCommandEventArgs. J'utilise la propriété Item pour récupérer l'objet mis à jour et le remplacer dans ma collection, en utilisant la propriété key pour mettre à jour le bon objet:
async Task Updating ( GridCommandEventArgs e ) [19659024] {
empGrid emp = ( empGrid ) e . Item ;
empData [ emp . key ] = emp ;
}
L'ajout de nouveaux éléments nécessite le plus de code. Tout d'abord, vous devez répondre à l'utilisateur en cliquant sur le bouton Ajouter dans la barre de commandes en ajoutant une ligne vide à la grille. Cela implique la création d'un objet GridState, la préparation d'un nouvel objet empData et l'utilisation de ce nouvel objet empData pour définir la propriété InsertedItem de l'état. Une fois que vous avez fait cela, il vous suffit de mettre à jour la grille avec le nouvel état.
C'est ce que fait ce code (et définit quelques valeurs par défaut sur le nouvel objet empData en cours de route):
async Task ] Ajout de ( GridCommandEventArgs e )
{
GridState < empGrid > state = new GridState < empGrid > () ;
state . InsertedItem = new empGrid
{
Id = empData . Valeurs . Max ( e = > e . Id ) + 1
HireDate = DateTime . Now
clé = DateHeure . Maintenant
} ;
attendre theGrid . SetState ( state ) ;
}
Lorsque l'utilisateur clique sur le bouton Enregistrer de la grille après avoir créé le nouvel objet, la grille OnCreate l'événement est déclenché. Comme pour les suppressions et les mises à jour, dans la méthode que vous avez associée à l'événement OnCreate, vous mettez à jour votre source de données sous-jacente.
Pour mon dictionnaire, cela consiste à extraire l'élément de la propriété Item de GridCommandEventArgs et à l'ajouter à ma collection avec une clé appropriée. Étant donné que mon objet «compatible avec la liste» - empGrid - hérite de l'objet dans ma source de données sous-jacente - Employee - je peux m'en tirer avec une conversion de données implicite dans ce code:
async void Creating ] ( GridCommandEventArgs e )
{
empGrid emp = ( empGrid ) e . Item ;
empData . Add ( DateTime . Now
emp ) ;
}
Et c'est la puissance de l'événement OnRead: la possibilité de récupérer des données pour convertir des données de n'importe quel format dans un format avec lequel DataGrid fonctionnera.
Source link