Vertrauen der weltweit führenden Unternehmen
Überblick
Das Blazor TreeGrid ist eine funktionsreiche Komponente, die selbstbezügliche, hierarchische (baumartige) Daten effektiv in tabellarischer Form visualisiert. Der umfangreiche Funktionsumfang beinhaltet u. a. Datenbindung, Bearbeitung, Sortierung, Filterung, Paging, Aggregationen und den Export in Excel-, CSV- und PDF‑Formate.
Warum Syncfusion Essential Studio® Blazor Tree Grid wählen?
Hohe Leistung
Stellt Daten hierarchisch dar; das optimierte Design liefert hohe Performance und kann Millionen Datensätze laden in wenigen Sekunden darstellen.
Nahtlose Datenbindung
Binden Sie Daten nahtlos an verschiedene lokale und Remote‑Datenquellen wie JSON, OData, WCF und RESTful‑Webservices mithilfe eines Data Managers.
Selbstbezügliches, hierarchisches Grid
Das Tree Grid wurde entwickelt, um selbstbezügliche und hierarchische Daten in tabellarischer Form darzustellen und so die Beziehung zwischen Eltern‑und Kinddatensätzen sichtbar zu machen.
Flexible Bearbeitung
Das Blazor Tree Grid unterstützt CRUD‑Operationen (Erstellen, Lesen, Aktualisieren, Löschen) mit beobachtbaren Daten. Es bearbeitet Arrays von JSON‑Objekten oder Remote‑Datenservices über den Data Manager.
Passt sich jeder Auflösung an
Das Tree Grid verfügt über ein sehr responsives Layout und ein optimiertes Design für Desktop‑, Touch‑ und Smartphone‑Displays. Es funktioniert gut auf mobilen Geräten mit iOS, Android oder Windows.
Eigene Template‑Designs erstellen
Mit Templates können Anwender eine maßgeschneiderte UI im Blazor Tree Grid entsprechend den Anforderungen ihrer Anwendung erstellen. Es stehen zahlreiche Template‑Optionen zur Verfügung.
Attraktive, anpassbare Themes
Modernes Design mit mehr als 5 integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Nutzen Sie das online Theme Studio tool um die Themes des Tree Grid einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen die Nutzung des Tree Grid durch Formatierung von Datum, Währung und Zahlen gemäß ihren Präferenzen.
Blazor Tree Grid Code-Beispiel
Starten Sie schnell mit dem Blazor Tree Grid anhand weniger Zeilen C#-Code, wie im folgenden Beispiel gezeigt. Schauen Sie sich auch unser Blazor TreeGrid Beispiel an, das die Darstellung und Konfiguration des Blazor Tree Grid demonstriert.
Im Blazor Playground bearbeiten
@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;
}
}
}Adaptives UI-Layout
Die Benutzeroberfläche des Blazor Tree Grid ist für gute Darstellung und Usability auf kleinen Bildschirmen angepasst und neu gestaltet. Filter-, Such- und Bearbeitungsdialoge passen sich an die Bildschirmgröße an.

Spalten
Spalten definieren das Schema einer Datenquelle im Blazor Tree Grid. Es werden Formatierung, Spaltendefinitionen, Fixieren von Spalten, Spaltenzusammenführung, Zeilenumbruch, Spaltenauswahl, Spaltenmenü, Spaltenreihenfolge und weitere Funktionen unterstützt.
Paging
Über Paging kann ein Datenabschnitt aus der zugewiesenen Datenquelle angezeigt werden. Das Blazor Tree Grid bietet eine integrierte Pager‑UI mit Optionen zur Anpassung des gesamten UI. Es verfügt außerdem über einen on‑demand paging Modus für effiziente Datenabfragen von Remote‑Webservices.


Sortierung
Das Blazor Tree Grid ermöglicht Benutzern, eine Spalte durch Klick auf die Kopfzeile zu sortieren. Ein Strg‑Klick auf eine Kopfzeile führt eine Mehrfachsortierung aus. Die Daten können auf- oder absteigend sortiert werden.
Filterung
Filterung hilft dabei, bestimmte oder verwandte Datensätze anzuzeigen, die bestimmten Kriterien entsprechen. Es werden verschiedene Filtertypen unterstützt, einschließlich leistungsstarker Excel‑ähnlicher Filter. Das Blazor Tree Grid erlaubt es Benutzern, passende Filtertypen zu wählen, eigene Filterlogiken zu definieren und die Filter‑UI an die Anforderungen ihrer Anwendung anzupassen. Filterung kann auch in Bezug auf zugehörige Eltern‑ oder Kinddatensätze definiert werden.


Auswahl
Das Blazor TreeGrid erlaubt die Auswahl von Zeilen oder Zellen. Eine oder mehrere Zeilen bzw. Zellen können durch Gedrückthalten von Strg (Ctrl) oder Command ausgewählt werden oder programmgesteuert erfolgen.
Zeile
Zeilen im Tree Grid repräsentieren einzelne Datenobjekte aus der Datenquelle. Es werden das Erweitern/Zusammenklappen von Kindzeilen, das Umordnen von Zeilen, Einrücken/Ausrücken zur Änderung der Hierarchieebenen und viele weitere Funktionen unterstützt.


Bearbeitung
Das Blazor Tree Grid bietet vollständige Unterstützung für Create‑, Read‑, Update‑ und Delete‑Operationen (CRUD). Neben integrierten Editor‑Komponenten zur Bearbeitung einzelner Spaltenwerte können Anwender mithilfe von Templates eigene Editor‑Komponenten erstellen, die zu ihren Anforderungen passen. Die Bearbeitung erfolgt mit einer Liste von Geschäftsobjekten oder über Remote‑Datenservices mithilfe des Data Managers.
Zeilen per Drag & Drop
Das Blazor TreeGrid ermöglicht es Benutzern, Zeilen innerhalb desselben oder eines anderen Tree Grids per Drag & Drop zu verschieben. Diese Funktion ist besonders nützlich, um Daten neu zu organisieren und die Benutzererfahrung intuitiver zu gestalten.


Aggregation
Aggregationen für Spaltenwerte lassen sich einfach mit der Aggregat‑Funktion anzeigen. Aggregationen können angepasst werden, um Werte in einzelnen Summenzeilen darzustellen.
Gefrorene Spalten
Gefrorene Spalten sind links, rechts oder beidseitig des Tree Grid sichtbar und machen den restlichen Grid‑Inhalt scrollbar. Sie werden hauptsächlich verwendet, um Zellwerte zu vergleichen. Benutzer können Spalten durch Interaktion mit den gefrorenen Trennern ein‑ oder ausschließen.
Exportieren

Excel-, PDF- und CSV‑Export
Exportieren Sie das Blazor Tree Grid einfach in Dateiformate wie Excel, PDF oder CSV.

Ermöglicht Benutzern, Daten entweder über die Druckoption in der Toolbar oder programmgesteuert zu drucken. Drucken Sie alle Zeilen eines Blazor Tree Grid unabhängig von der Seitenanzahl oder nur die aktuell angezeigte Seite.
Weitere Funktionen

Zeilenhöhe
Die Zeilenhöhe ist ein wichtiger Faktor zur Anzeige der Anzahl der Datensätze im Viewport und lässt sich mühelos gemäß den UI‑Anforderungen der Anwendung anpassen. Es ist auch möglich, die Zeilenhöhe bedingt festzulegen.

In die Zwischenablage kopieren
Die Zwischenablage bietet die Möglichkeit, ausgewählte Zeilen‑ oder Zellen‑Daten zu kopieren. Verwenden Sie Ctrl+C bzw. Ctrl+Shift+H, um Daten mit bzw. ohne Kopfzeilen zu kopieren.

Kontextmenü
Das Kontextmenü verbessert die Bedienung des Blazor Tree Grid durch ein Popup‑Menü. Es erscheint bei Rechtsklick auf Zelle, Kopfzeile oder Pager. Neben den eingebauten Standardelementen können benutzerdefinierte Kontextmenüeinträge hinzugefügt werden.

Breite und Höhe
Ermöglicht das Ändern der Größe des Blazor Tree Grid durch Setzen der Eigenschaften width und height. Horizontale und vertikale Scrollleisten erscheinen, wenn der Inhalt das Tree Grid überläuft. Damit das Tree Grid den übergeordneten Container vollständig ausfüllt, setzen Sie height und width einfach auf 100%.

Gestapelte Kopfzeilen
Gestapelte Kopfzeilen ermöglichen das Gruppieren und Visualisieren von Spaltenüberschriften in gestapelter Form. Es gibt keine Begrenzung für die Anzahl gestapelter Spalten. Benutzer können alle Blazor TreeGrid‑Aktionen ausführen, auch wenn die Spalten gestapelt sind.
Barrierefreiheit

Tastaturnavigation
Das Blazor Tree Grid stellt sicher, dass jede Zelle per Tastatur zugänglich ist. Wichtige Funktionen wie Erweitern/Reduzieren von Kindzeilen, Sortieren, Auswählen und Bearbeiten können allein über Tastaturbefehle ausgeführt werden; keine Mausinteraktion ist erforderlich. Dies unterstützt die Erstellung gut zugänglicher Anwendungen mit dieser Komponente.

Screenreader
Das Blazor TreeGrid bietet umfassende WAI‑ARIA‑Barrierefreiheitsunterstützung. Die UI des Blazor Tree Grid enthält kontrastreiche visuelle Elemente, die sehbehinderten Personen ein optimales Anzeigeerlebnis ermöglichen. Zudem sind die aussagekräftigen UI‑Beschreibungen über Hilfstechnologien wie Screenreader leicht zugänglich.

Rechts‑nach‑links (RTL)
Die Rechts‑nach‑Links‑Darstellung ermöglicht die Anzeige von Text und Layout des Tree Grid von rechts nach links. Dies verbessert die Benutzererfahrung und Barrierefreiheit für RTL‑Sprachen.
Weitere unterstützte Frameworks
Das Tree Grid ist für die Frameworks React, Angular, JavaScript und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das Blazor Tree Grid funktioniert mit allen modernen Webbrowsern gut, einschließlich Chrome, Firefox, Edge, Safari und Opera.

Nicht sicher, wie Sie Ihr erstes Blazor TreeGrid erstellen? Unsere Tutorial‑Videos und Dokumentation helfen weiter.
Jetzt ansehen Jetzt lesenBlazor-Komponenten – über 155 Benutzeroberflächen- und DataViz-Komponenten
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® Blazor Tree Grid wählen?
Flexible Datenbindung mit Unterstützung für Datenquellen wie Web API, OData, Entity Framework und mehr.
Sehr schnelle Ladezeiten sowie reichhaltige UI‑Interaktion und Tastaturnavigation in Blazor‑Apps sowohl serverseitig als auch clientseitig (WebAssembly).
Umfangreiche Funktionen mit Anpassungsmöglichkeiten Optionen, geeignet für komplexe, großangelegte Anwendungen.
CRUD‑Operationen mit verschiedenen Bearbeitungsmodi und eingebauten Validierungsregeln.
- Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobile‑Touch‑freundlich und responsive.
Umfangreiche Demos, Dokumentation und Videos, um schnell einzusteigen.
Wo finde ich die Syncfusion Blazor Tree Grid Demo?
Unsere Blazor TreeGrid‑Demo zeigt, wie das Tree Grid gerendert und konfiguriert wird.
Ist Syncfusion Blazor Tree Grid kostenlos?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Es steht jedoch eine kostenlose Community‑Lizenz für Unternehmen und Einzelpersonen zur Verfügung, deren Organisationen einen Jahresumsatz von unter 1 Million USD und fünf oder weniger Entwickler haben.
Wie starte ich mit Syncfusion Blazor Tree Grid?
Ein guter Einstieg ist unsere umfassende Erste Schritte Dokumentation.
Unsere Kunden lieben uns
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.
Neueste Aktivitäten: Blazor Tree Grid-Tutorials und -Blogs
Die Video-Tutorials und Blog-Artikel zum Blazor Tree Grid führen Sie durch die Erstellung Ihrer ersten Anwendung mit diesen Blazor-Komponenten. Sie bieten Strategien zur Fehlerbehebung, beschreiben Funktionen und Anwendungsfälle, kündigen neue Versionen an, erklären Best Practices und zeigen Beispielszenarien. Informieren Sie sich über unsere neuesten Blog-Beiträge und Video-Tutorial-Kanäle für Updates zum Blazor Tree Grid.
BLOG
Verbessern Sie die Datenvisualisierung mit einer Nested Grid-Oberfläche in Blazor TreeGrid
SEPTEMBER 6, 2023