Syncfusion Feedback

Vertrauen der weltweit führenden Unternehmen

Syncfusion Trusted Companies

Ü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?

Blazor Tree Grid High Performance image

Hohe Leistung

Stellt Daten hierarchisch dar; das optimierte Design liefert hohe Performance und kann Millionen Datensätze laden in wenigen Sekunden darstellen.

Blazor Tree Grid Data Binding image

Nahtlose Datenbindung

Binden Sie Daten nahtlos an verschiedene lokale und Remote‑Datenquellen wie JSON, OData, WCF und RESTful‑Webservices mithilfe eines Data Managers.

Blazor Tree Grid Hierarchical Grid image

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.

Blazor Tree Grid Flexible Editing image

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.

Blazor Tree Grid Adapts To Any Resolution image

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.

Blazor Tree Grid Template Designs image

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.

Blazor Tree Grid Customizable Themes image

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.

Blazor Tree Grid Global Local image

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.

Blazor Tree Grid Adaptive Ui image


Spalten im Blazor TreeGrid.

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.

Paging im Blazor TreeGrid.


Sortierung im Blazor TreeGrid.

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.

Filterung im Blazor TreeGrid.


Zellenauswahl im Blazor TreeGrid.

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.

Zeilen im Blazor TreeGrid.


Bearbeitung im Blazor TreeGrid.

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.

Zeilen‑Drag‑und‑Drop im Blazor TreeGrid.


Aggregation im Blazor TreeGrid.

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.

Blazor Tree Grid Freeze image


Exportieren

Export in Excel-, PDF- und CSV‑Formate des Blazor TreeGrid.

Excel-, PDF- und CSV‑Export

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

Drucken im Blazor TreeGrid.

Drucken

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 im Blazor TreeGrid.

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 aus Blazor TreeGrid.

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ü im Blazor TreeGrid.

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 im Blazor TreeGrid.

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 im Blazor TreeGrid.

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 im Blazor TreeGrid.

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.

Barrierefreiheit und Screenreader‑Unterstützung im Blazor TreeGrid.

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‑Darstellung im Blazor TreeGrid.

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.

Unterstützte Browser im Blazor TreeGrid.

Blazor-Komponenten – über 155 Benutzeroberflächen- und DataViz-Komponenten

Häufig gestellte Fragen

  • 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.

Unsere Blazor TreeGrid‑Demo zeigt, wie das Tree Grid gerendert und konfiguriert wird.

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.

Ein guter Einstieg ist unsere umfassende Erste Schritte Dokumentation.

Unsere Kunden lieben uns

Mit einem ausgezeichneten Toolset und einem großartigen Supportteam verkürzt Syncfusion® die Entwicklungszeit der Kunden.
Hier sind einige ihrer Erfahrungen.

Echte Erfolgsgeschichten ansehen

Entwickler auf der ganzen Welt vertrauen auf Syncfusions Essential Studio, um komplexe Projekte zu vereinfachen und die Auslieferung zu beschleunigen. Mit einer umfangreichen Bibliothek an UI-Steuerelementen, leistungsstarken SDKs und zuverlässigem Support hilft Essential Studio Teams, unternehmensreife Anwendungen mit Zuversicht zu erstellen.

Fallstudien erkunden


Von Benutzern auf der ganzen Welt bewertet

Transformieren Sie Ihre Apps – jetzt kostenlose Testversion laden da
Gratis-Testversion starten Keine Kreditkarte erforderlich.

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.

Up arrow icon