Blazor TreeGrid – Haute performance
- Charger de grandes quantités de données en chargeant dynamiquement les éléments enfants à la demande.
- Inclure des interactions UI flexibles : étendre/réduire les enregistrements parents, éditer des dialogues, etc.
- Apparence attrayante avec des thèmes intégrés tels que Fabric, Bootstrap, etc.
Quick Overview Video
Confiado por las empresas líderes del mundo
Aperçu
Le Blazor TreeGrid est un composant riche en fonctionnalités utilisé pour visualiser efficacement des données hiérarchiques auto-référentielles (structure en arbre) au format tabulaire. Son ensemble complet de fonctionnalités inclut la liaison de données, l’édition, le tri, le filtrage, la pagination, l’agrégation de lignes et l’exportation vers les formats Excel, CSV et PDF.
Pourquoi choisir Syncfusion Essential Studio® Blazor Tree Grid ?
Haute performance
Afficher les données de manière hiérarchique grâce à une conception optimisée offrant de hautes performances et permettant de charger des millions d’enregistrements en quelques secondes.
Liaison de données fluide
Lier les données de façon transparente avec diverses sources de données locales et distantes telles que JSON, OData, WCF et les services web RESTful à l’aide d’un gestionnaire de données.
Grille hiérarchique auto-référentielle
Le Tree Grid est conçu pour visualiser des données self-référentielles et hiérarchiques au format tabulaire. Cela permet d’afficher la relation entre les enregistrements parents et enfants.
Édition flexible
Le Blazor Tree Grid effectue des opérations CRUD (création, lecture, mise à jour, suppression) sur des données observables. Il prend en charge l’édition d’un tableau JSON ou via un service distant à l’aide du gestionnaire de données.
S’adapte à toutes les résolutions
Le Tree Grid possède une mise en page hautement responsive et un design optimisé pour ordinateurs, écrans tactiles et smartphones. Il fonctionne bien sur tous les mobiles sous iOS, Android ou Windows.
Créez vos propres templates
Avec les templates, les utilisateurs peuvent créer une interface personnalisée dans le Blazor Tree Grid en fonction des besoins de leur application grâce à une large gamme d’options de template.
Thèmes personnalisables et attrayants
Design moderne avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, etc. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes du Tree Grid.
Internationalisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser le Tree Grid en formatant les dates, devises et nombres selon leurs préférences.
Exemple de code Blazor Tree Grid
Commencez facilement avec le Blazor Tree Grid à l’aide de quelques lignes de code C# comme démontré ci‑dessous. Découvrez également notre Exemple Blazor TreeGrid montrant comment rendre et configurer le Blazor Tree Grid.
Modifier dans Blazor Playground
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1">
<TreeGridColumns>
<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<SelfReferenceData> TreeData { get; set; }
protected override void OnInitialized()
{
this.TreeData = SelfReferenceData.GetTree().Take(30).ToList();
}
public class SelfReferenceData
{
public static List<SelfReferenceData> tree = new List<SelfReferenceData>();
public int TaskID { get; set; }
public string TaskName { get; set; }
public String Progress { get; set; }
public int Duration { get; set; }
public int? ParentID { get; set; }
public SelfReferenceData() { }
public static List<SelfReferenceData> GetTree()
{
if (tree.Count == 0)
{
int root = -1;
for (var t = 1; t <= 10000; t++)
{
Random ran = new Random();
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), Progress = progr, Duration = ran.Next(1, 50) });
int parent = tree.Count;
for (var c = 0; c < 2; c++)
{
root++;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), ParentID = rootItem, Progress = progr, Duration = ran.Next(1, 50) });
}
}
}
return tree;
}
}
}Mise en page adaptative
L’interface utilisateur du Blazor Tree Grid est personnalisée et repensée pour offrir une excellente lisibilité et ergonomie sur les petits écrans. Les dialogues de filtrage, de recherche et d’édition s’adaptent à la taille de l’écran.
Colonnes
Les colonnes définissent le schéma d’une source de données dans le composant Blazor Tree Grid. Elles prennent en charge le formatage, la définition des colonnes, le gel des colonnes, le spanning, le retour à la ligne, le sélecteur de colonnes, le menu de colonne, le réordonnancement, et d’autres fonctionnalités.
Pagination
Grâce à la pagination, un segment de données peut être affiché à partir de la source de données définie. Le Blazor Tree Grid propose une interface de pagination intégrée avec des options pour personnaliser entièrement son UI. Il dispose également d’un mode de pagination à la demande pour une récupération efficace des données depuis des services web distants.
Tri
Le Blazor Tree Grid permet aux utilisateurs de trier une colonne en cliquant simplement sur son en-tête. Un Ctrl + clic sur l’en-tête active le tri multiple. Le tri peut être effectué en ordre croissant ou décroissant.
Filtrage
Le filtrage permet d’afficher des enregistrements spécifiques ou liés répondant à un critère donné. Il prend en charge divers types de filtres, y compris un filtre puissant de type Excel. Le filtrage du Blazor Tree Grid permet aux utilisateurs de choisir le type de filtre approprié, de définir leur propre logique de filtrage personnalisée et de personnaliser l’interface de filtrage selon les besoins de l’application. Il est possible de définir des filtres prenant en compte les enregistrements parents ou enfants liés.
Sélection
Le Blazor TreeGrid permet de sélectionner des lignes ou des cellules. Une ou plusieurs lignes/cellules peuvent également être sélectionnées en maintenant la touche Ctrl ou Command, ou de manière programmatique.
Lignes
Les lignes du Tree Grid représentent chaque objet de données provenant de la source. Elles prennent en charge l’expansion/la réduction des lignes enfants, le réordonnancement, l’indentation/désindentation pour modifier les niveaux hiérarchiques, et bien d’autres fonctionnalités.
Édition
Le Blazor Tree Grid offre un support complet pour les opérations de création, lecture, mise à jour et suppression (CRUD). En plus des composants d’édition intégrés pour modifier une valeur de colonne, le support de templates permet de créer des composants d’édition personnalisés adaptés aux besoins de l’application. L’édition peut être réalisée sur une liste d’objets métiers ou via un service de données distant à l’aide du gestionnaire de données.
Glisser-déposer de lignes
Le Blazor TreeGrid permet aux utilisateurs de glisser-déposer des lignes au sein du même tree grid ou d’un autre. Cette fonctionnalité est particulièrement utile pour réorganiser les données et offrir une expérience utilisateur plus intuitive.
Agrégation
Les agrégations des valeurs des colonnes peuvent être affichées facilement grâce à la fonctionnalité d’agrégation. Les agrégats peuvent être personnalisés pour afficher des valeurs dans des lignes de synthèse individuelles.
Colonnes figées
Les colonnes figées sont visibles à gauche, à droite ou des deux côtés du tree grid et rendent le reste du contenu défilable. Elles sont principalement utilisées pour comparer des valeurs de cellule. Les utilisateurs peuvent inclure ou exclure des colonnes du gel en interagissant avec les séparateurs de gel entre les colonnes.
Exportation
Exporter vers Excel, PDF, CSV
Exportez facilement le composant Blazor Tree Grid dans des formats de fichier tels que Excel, PDF ou CSV.
Impression
Permet aux utilisateurs d’imprimer les données via l’option d’impression de la barre d’outils ou de manière programmatique. Imprimez toutes les lignes d’un Blazor Tree Grid indépendamment du nombre de pages, ou uniquement la page actuellement affichée.
Fonctionnalités supplémentaires
Hauteur des lignes
La hauteur des lignes est un facteur important pour l’affichage du nombre d’enregistrements dans la zone visible, et elle est facilement personnalisable selon les exigences de l’UI de l’application. Il est également possible de définir la hauteur des lignes de manière conditionnelle.
Copier dans le presse‑papier
Le presse‑papier offre la possibilité de copier les données des lignes ou cellules sélectionnées. Utilisez les combinaisons Ctrl+C et Ctrl+Shift+H pour copier les données avec ou sans en‑têtes, respectivement.
Menu contextuel
Le menu contextuel améliore l’interaction utilisateur du Blazor Tree Grid via un menu popup. Il apparaît lors d’un clic droit sur une cellule, un en‑tête ou le pager. En plus des éléments de menu par défaut, il permet d’ajouter des éléments contextuels personnalisés.
Largeur et hauteur
Permet de modifier la taille du Blazor Tree Grid en définissant les propriétés width et height. Des barres de défilement horizontale et verticale apparaîtront lorsque le contenu déborde de l’élément Tree Grid. Pour que le Tree Grid remplisse son conteneur parent, il suffit de définir la hauteur et la largeur à 100%.
En‑têtes empilés
Les en‑têtes empilés permettent de grouper et de visualiser les en‑têtes de colonnes de manière empilée. Il n’y a pas de limite au nombre de colonnes pouvant être empilées. Les utilisateurs peuvent effectuer toutes les actions du Blazor TreeGrid même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
Le Blazor Tree Grid garantit que chaque cellule est accessible au clavier. Les fonctionnalités principales comme l’expansion/réduction des lignes enfants, le tri, la sélection et l’édition peuvent être effectuées uniquement au clavier ; aucune interaction souris n’est requise. Cela aide à créer des applications très accessibles avec ce composant.
Lecteurs d’écran
Le Blazor TreeGrid dispose d’un support complet WAI‑ARIA pour l’accessibilité. L’UI du Blazor Tree Grid inclut des éléments visuels à fort contraste, aidant les personnes malvoyantes à bénéficier d’une meilleure expérience. De plus, les descriptions UI valides sont facilement accessibles via des technologies d’assistance comme les lecteurs d’écran.
De droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la mise en page du Tree Grid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Autres frameworks pris en charge
Le Tree Grid est disponible pour les frameworks React, Angular, JavaScript et Vue. Explorez ses options spécifiques à chaque plateforme via les liens suivants :
Navigateurs pris en charge
Le Blazor Tree Grid fonctionne correctement avec tous les navigateurs modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Blazor TreeGrid ? Nos tutoriels vidéo et la documentation peuvent vous aider.
Je veux le regarder maintenant Je veux le lire maintenantComponentes de Blazor: más de 155 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
Foire aux questions
Pourquoi choisir Syncfusion Essential Studio® Blazor Tree Grid ?
Liaison de données flexible via data binding avec prise en charge de sources comme Web API, OData, Entity Framework, et plus.
Temps de chargement ultra‑rapide et interactions UI riches (filtrage) ainsi que navigation au clavier dans les applications Blazor côté serveur et côté client (WebAssembly).
Riche en fonctionnalités avec des options de personnalisation adaptées à la création d’applications complexes et à grande échelle.
Opérations CRUD avec différents modes d’édition et règles de validation intégrées.
- Configuration et API simples.
- Compatible avec tous les navigateurs modernes.
- Convivial pour le tactile mobile et responsive.
Nombreux démos, documentation et vidéos pour apprendre rapidement et commencer avec Blazor Tree Grid.
Où trouver la démo du Syncfusion Blazor Tree Grid ?
Vous pouvez consulter notre démo Blazor Tree Grid, qui montre comment rendre et configurer le Tree Grid.
Le Syncfusion Blazor Tree Grid est‑il gratuit ?
Non, il s’agit d’un produit commercial nécessitant une licence payante. Toutefois, une licence communautaire gratuite est disponible pour les entreprises et individus dont l’organisation a moins d’1 million USD de chiffre d’affaires annuel brut et cinq développeurs ou moins.
Comment démarrer Syncfusion Blazor Tree Grid ?
Un bon point de départ est notre documentation complète de prise en main.
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.
Blazor components
The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.
Igor L
CEO
Syncfusion objects with a Blazor
I have used some of the Syncfusion objects with a Blazor application. The support group has always been very helpful.
customer-image
Kris B
Software Development Consultant
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Ressources Syncfusion Blazor TreeGrid
Support technique
Contacter le support
Forums communautaires
Demandes fonctions & rapports de bogues
Contacter le support
Forums communautaires
Demandes fonctions & rapports de bogues
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 : tutoriels et blogs Blazor Tree Grid
Les tutoriels vidéo et articles de blog sur le Blazor Tree Grid vous guideront dans la création de votre première application avec ces composants Blazor. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités et les cas d’usage, annoncent les nouvelles versions, expliquent les bonnes pratiques et présentent des scénarios d’exemple. Consultez nos dernières publications sur le blog et nos chaînes de tutoriels vidéo pour les mises à jour du Blazor Tree Grid.
BLOG
Améliorer la visualisation des données avec une interface Nested Grid dans Blazor TreeGrid
SEPTEMBER 6, 2023
