Blazor DataGrid - Un composant de grille personnalisable
- Charge des millions d’enregistrements.
- Design mobile-first pour toutes résolutions.
- Édition flexible & filtrage façon Excel.
- Export facile en PDF, CSV et Excel.
Quick Overview Video
Confiado por las empresas líderes del mundo
Aperçu
Le Blazor DataGrid, également connu sous le nom de Blazor Grid, est un composant riche en fonctionnalités utile pour afficher des données sous forme tabulaire. Sa large gamme de fonctionnalités comprend la liaison de données, la disposition adaptative de l’interface utilisateur pour tous les appareils, l’édition, le filtrage de type Excel, le tri personnalisé, l’agrégation de lignes, la sélection et la prise en charge des formats Excel, CSV et PDF.
Pourquoi choisir Syncfusion Essential Studio® Blazor DataGrid ?
Haute performance
Des efforts bien pensés, et se concentre principalement sur la performance rapide pour charger des millions d’enregistrements en une seconde.
Liaison de données transparente
Lie de manière transparente les données à diverses sources de données locales et distantes, telles que IEnumerable/List, les services RESTful, les services OData, les services WCF, Observable Collection, ExpandoObject et DynamicObject.
S’adapte à toute résolution
DataGrid a une disposition très réactive et une conception optimisée pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles utilisant iOS, Android ou Windows OS.
Édition flexible
La grille Blazor effectue des opérations de création, lecture, mise à jour et suppression plus facilement avec une liste d’objets métier ou un service de données distant à l’aide d’un gestionnaire de données.
Créez vos propres designs de modèles
Permet aux utilisateurs de créer des expériences utilisateur personnalisées dans la grille Blazor en fonction des besoins de leur application à l’aide d’une large gamme d’options de modèles.
Thèmes attrayants et personnalisables
Design de pointe avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et bien d’autres. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes.
Exportation et impression faciles
Exportez la grille de données dans différents formats de fichiers, y compris Excel, PDF et CSV. Imprimez toutes les lignes, quel que soit le nombre de pages, ainsi que la page actuellement affichée.
Mondialisation et localisation
Permet aux utilisateurs de différentes régions de les utiliser en formatant les dates, la devise et la numérotation pour s’adapter aux préférences.
Grille prête pour l’IA pour des données plus intelligentes
Créez des applications Blazor plus intelligentes avec un DataGrid qui prend en charge les fonctionnalités d’IA prêtes à l’emploi. Ajoutez une recherche sémantique et une détection d’anomalies pour découvrir des informations et améliorer la fiabilité des données.
-
Recherche sémantique : Connectez votre modèle de traitement du langage naturel (NLP) pour activer les requêtes en langage naturel, éliminant le besoin de mots-clés exacts.
- Voir comment ajouter la recherche sémantique
-
Détection d'anomalies : Intégrez les services d'apprentissage automatique (ML) pour identifier les tendances irrégulières et prévenir les problèmes de données.
- Voir comment ajouter la détection d’anomalies
Exemple de code Blazor DataGrid
Commencez facilement avec le Blazor DataGrid en utilisant quelques lignes de code C# simples comme démontré ci-dessous. Explorez également notre exemple de Blazor DataGrid qui vous montre comment rendre et configurer la grille Blazor.
Modifier dans Blazor Playground
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders">
</SfGrid>
@code{
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}Disposition adaptative de l’interface utilisateur
L’interface utilisateur de la grille de données Blazor est personnalisée et repensée pour offrir de superbes vues et une excellente convivialité sur les petits écrans. Ses fonctionnalités incluent le filtrage, le tri, la recherche, le sélecteur de colonnes, le menu de colonnes, le menu déroulant du pagineur et les dialogues d’édition qui s’adaptent à la taille de l’écran et affichent les éléments de ligne dans une direction verticale.
Colonne
Les colonnes définissent le schéma de la source de données dans le composant Blazor DataGrid. Il prend en charge le formatage, la génération automatique de colonnes, les définitions de colonnes, le gel des lignes et des colonnes, l’étendue des colonnes, le retour à la ligne du texte, le sélecteur de colonnes, le menu des colonnes et d’autres fonctionnalités.
Pagination
Grâce à la pagination, un segment de données peut être visualisé à partir de la source de données assignée. La grille de données Blazor offre une interface utilisateur de pagination intégrée avec des options pour personnaliser l’ensemble de son interface. Elle dispose également d’un mode de pagination à la demande pour une récupération efficace des données à partir de services Web distants.
Tri
Triez les lignes par ordre croissant ou décroissant par rapport à une colonne en cliquant simplement sur l’en-tête. Triez les données de plusieurs colonnes en maintenant la touche Ctrl enfoncée + clic sur l’en-tête. De plus, vous pouvez définir votre propre logique de tri personnalisée en fonction des besoins de l’application dans Blazor DataGrid.
Filtrage
Le filtrage aide à visualiser les enregistrements particuliers ou liés qui répondent à un critère donné dans la grille de données. Blazor DataData prend en charge divers types de filtres, y compris de puissants filtres de type Excel. Choisissez le type de filtre approprié, définissez votre propre logique de filtrage personnalisée et personnalisez l’interface utilisateur de filtrage en fonction des besoins de l’application. Les caractères diacritiques peuvent également être filtrés.
Sélection
Le Blazor DataGrid permet de sélectionner des lignes ou des cellules. Il est également possible de sélectionner une ou plusieurs lignes ou cellules en maintenant Ctrl ou Commande enfoncée, ou par programme.
Édition
Le Blazor DataGrid prend entièrement en charge les opérations de création, lecture, mise à jour et suppression (CRUD). En plus des composants d’édition intégrés pour modifier la valeur d’une colonne particulière, des composants d’édition personnalisés peuvent être créés à l’aide de modèles selon les besoins de l’application. À l’aide d’un gestionnaire de données, vous pouvez effectuer des opérations d’édition avec une collection de tableaux ou un service de données distant.
Groupement
Regroupez les lignes pour afficher les données dans une structure hiérarchique organisée par ordre croissant ou décroissant afin de faciliter l’expansion et la réduction des enregistrements. Il existe une option pour regrouper les enregistrements de la colonne souhaitée par un simple glisser-déposer de cette colonne dans une zone de dépôt interactive.
Agrégation
Les agrégats pour les valeurs de colonne peuvent être facilement affichés à l’aide de la fonctionnalité d’agrégation. Les agrégats peuvent être personnalisés pour afficher les valeurs dans des lignes de résumé individuelles, des lignes de résumé de groupe individuelles ou des lignes de légende de groupe.
Lignes et colonnes figées
Les lignes et colonnes figées sont visibles en haut et sur le côté gauche, droit, les deux, ou à une position fixe, respectivement, rendant le reste du contenu de la grille défilable. Cette fonctionnalité est principalement utilisée pour comparer les valeurs de cellules dans le composant JavaScript DataGrid.
En-tête fixe
L’en-tête de la grille de données Blazor doit être en position fixe lors du défilement vertical du document pour visualiser le contenu de la grille de données avec l’en-tête de colonne.
Glisser-déposer de lignes
Le Blazor Grid permet aux utilisateurs de glisser-déposer des lignes vers un autre DataGrid ou un composant personnalisé. Les utilisateurs peuvent également glisser-déposer des lignes au sein du même DataGrid à l’aide de l’icône de glissement et transférer des lignes entre différents groupes.
Grille maître-détail
Blazor Master Detail Grid est un scénario d’utilisation dans lequel les détails d’un enregistrement sont affichés dans une grille de données séparée en cliquant sur une ligne particulière.
Blazor Live DataGrid
Le Blazor Live DataGrid est optimisé pour la gestion et la mise à jour d’un grand nombre d’enregistrements en temps réel, adapté à la liaison d’enregistrements financiers et plus encore.
Fonctionnalités additionnelles
Hauteur de ligne
La hauteur de ligne est un facteur majeur lors de l’affichage du nombre d’enregistrements dans la fenêtre d’affichage, et elle est facilement personnalisable en fonction des exigences de l’interface utilisateur de l’application. Il est également possible de définir la hauteur de ligne de manière conditionnelle.
Copier dans le presse-papiers
Le presse-papiers permet aux utilisateurs de copier les données des lignes ou cellules sélectionnées. Utilisez les combinaisons de touches Ctrl+C et Ctrl+Maj+H pour copier les données avec et sans en-têtes, respectivement.
Menu contextuel
Effectue diverses actions dans une grille de données JavaScript à l’aide du menu contextuel qui apparaît lorsque la cellule, l’en-tête ou le pagineur est cliqué avec le bouton droit. En plus des éléments de menu par défaut intégrés, des éléments de menu contextuels personnalisés peuvent être ajoutés.
Largeur et hauteur
Définissez les propriétés de largeur et de hauteur pour modifier la taille de la grille de données. Lorsque le contenu dépasse l’élément de la grille, des barres de défilement horizontales et verticales apparaissent. Pour remplir le conteneur parent de la grille de données, définissez simplement la hauteur et la largeur à 100 %.
En-têtes empilés
Les en-têtes empilés permettent de regrouper et de visualiser les en-têtes de colonnes de manière empilée. Le nombre de colonnes pouvant être empilées est illimité. Effectuez toutes les actions de la grille de données Blazor même lorsque les colonnes sont empilées.
Infobulle
Améliorez l’expérience utilisateur avec des infobulles prenant en charge un contenu riche dans le Blazor DataGrid. Affichez des images, des icônes et des composants personnalisés à côté du texte brut pour des interactions plus contextuelles et visuellement attrayantes qui améliorent la clarté et la convivialité au sein de l’interface de la grille.
Accessibilité
Navigation au clavier
Blazor DataGrid garantit que chaque cellule est accessible au clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide de commandes clavier ; aucune interaction à la souris n’est requise. Cela permet de créer des applications très accessibles en utilisant ce composant.
Lecteur d’écran
La vue Blazor DataGrid dispose d’un support complet d’accessibilité WAI-ARIA. L’interface utilisateur de la grille de données Blazor comprend des éléments visuels à contraste élevé, aidant les personnes malvoyantes à avoir la meilleure expérience visuelle. De plus, les descriptions d’interface utilisateur valides sont facilement accessibles grâce aux technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la mise en page du Blazor DataGrid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Optimisé pour le mobile et convivial au toucher
Le Blazor Grid a une disposition très réactive et une conception finement optimisée pour les ordinateurs de bureau, les écrans tactiles et les smartphones.
Prise en charge tactile
Des gestes tactiles conviviaux et une conception d’interface utilisateur interactive contribuent à produire la meilleure expérience utilisateur. Toutes les fonctionnalités de la grille Blazor fonctionnent sur les appareils tactiles sans configuration.
Pageur réactif
Le pagineur Blazor DataGrid agit intelligemment et modifie entièrement son interface utilisateur de manière réactive en fonction des dimensions de la grille. Sa conception optimisée offre la meilleure interaction d’interface utilisateur sur différents appareils.
Autres frameworks pris en charge
Le DataGrid est disponible pour les frameworks React, Angular, JavaScript et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
Le Blazor DataGrid fonctionne bien avec tous les navigateurs Web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Blazor DataGrid ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant Commencez avec Blazor Server-side DataGridComponentes de Blazor: más de 145 componentes de interfaz de usuario y DataViz
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Visionneuses et éditeurs de fichiers
Listes déroulantes
Navigation
Champs de saisie
Boutons
Chat interactif
Formulaires
Questions Fréquemment Posées
Pourquoi choisir Syncfusion Essential Studio® Blazor DataGrid ?
Le composant Syncfusion Blazor Grid prend en charge les fonctionnalités suivantes :
Charge des millions d’enregistrements en une seconde seulement.
Liaison de données flexible avec prise en charge de sources de données telles que Web API, OData, Entity Framework, etc.
Interaction UI riche et navigation au clavier dans les applications Blazor côté serveur et côté client (WebAssembly).
- Doté de nombreuses fonctionnalités avec des options de personnalisation adaptées à la création d’applications complexes et à grande échelle.
- L’un des meilleurs Blazor DataGrid du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration et API simples.
- Prend en charge tous les navigateurs modernes.
- Compatible avec les appareils mobiles tactiles et réactif.
Démos, documentation et vidéos complètes pour apprendre rapidement et commencer avec Blazor DataGrid.
Quel est le prix de Syncfusion Blazor DataGrid ?
Nous ne vendons pas le Blazor DataGrid séparément. Il n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion, qui contient plus de 145 composants Blazor, y compris le DataGrid. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs, et inclut le support et les mises à jour jusqu’à l’expiration de l’abonnement. En plus de cela, nous pourrions être en mesure d’offrir des réductions supplémentaires en fonction des promotions en cours. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo de Syncfusion Blazor DataGrid ?
Vous pouvez trouver notre démo Blazor DataGrid, qui montre comment rendre et configurer la grille de données.
Puis-je acheter le composant Syncfusion Blazor DataGrid séparément ?
Non, nos plus de 1,600 composants et frameworks pour le Web, le mobile et le bureau, y compris notre Blazor DataGrid, ne sont pas vendus individuellement. Ils ne sont disponibles qu’en tant que partie d’une licence d’équipe. Cependant, nous avons fixé un prix compétitif pour le produit, de sorte qu’il ne coûte qu’un peu plus cher que ce que certains autres fournisseurs facturent pour leur composant DataGrid seul. Nous avons également constaté que, d’après notre expérience, nos clients commencent généralement par utiliser un de nos produits, puis étendent rapidement leur utilisation à plusieurs produits. Nous avons donc estimé qu’il était préférable d’offrir tous les plus de 1,600 composants et frameworks pour un abonnement qui commence à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des réductions en fonction des promotions en cours. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Syncfusion Blazor DataGrid ?
Non, il s’agit d’un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont moins d’un million de dollars US de revenus bruts annuels et cinq développeurs ou moins.
Comment commencer avec Syncfusion Blazor DataGrid ?
Un bon point de départ serait notre documentation complète de démarrage.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
Evalue par des utilisateurs du monde entier.
Ressources Syncfusion Blazor DataGrid
Kits UI
Téléchargement Figma
Téléchargement Figma
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
Activités récentes dans les tutoriels et blogs Blazor DataGrid
Les tutoriels vidéo et les articles de blog sur Blazor DataGrid vous guideront dans la création de votre première application avec les composants Blazor. Ils vous donneront des idées de résolution de problèmes, décriront les fonctionnalités et leur fonctionnement, annonceront la disponibilité de nouvelles fonctionnalités, expliqueront les meilleures pratiques des composants Blazor DataGrid et décriront des scénarios d’exemple utilisant les composants Blazor DataGrid. Consultez nos activités récentes sur notre blog et nos chaînes de tutoriels vidéo pour Blazor DataGrid.
BLOG
Améliorer les performances de Blazor DataGrid avec les techniques de virtualisation
31 JUILLET 2024
