Blazor DataGrid – Eine anpassbare Rasterkomponente
- Lädt Millionen Datensätze blitzschnell.
- Mobile-First-Design für alle Geräte.
- Flexible Bearbeitung und Spaltenanpassung.
- Export nach PDF, CSV und Excel leicht gemacht.
Quick Overview Video
Vertrauen der weltweit führenden Unternehmen
Übersicht
Das Blazor DataGrid, auch bekannt als Blazor Grid, ist eine funktionsreiche Komponente zum Anzeigen von Daten in einem Tabellenformat. Sein breites Spektrum an Funktionen umfasst Datenbindung, adaptives UI-Layout für alle Geräte, Bearbeitung, Excel-ähnliche Filterung, benutzerdefinierte Sortierung, Aggregation von Zeilen, Auswahl und Unterstützung für Excel-, CSV- und PDF-Formate.
Warum Syncfusion Essential Studio® Blazor DataGrid wählen?
Hohe Leistung
Durchdachte Anstrengungen und der Fokus auf schnelllebige Leistung zum Laden von Millionen von Datensätzen in nur einer Sekunde.
Nahtlose Datenbindung
Binden Sie Daten nahtlos an verschiedene lokale und Remote-Datenquellen, wie IEnumerable/List, RESTful-Dienste, OData-Dienste, WCF-Dienste, Observable Collection, ExpandoObject und DynamicObject.
Passt sich jeder Auflösung an
DataGrid verfügt über ein hochgradig reaktionsfähiges Layout und ein optimiertes Design für Desktops, Touchscreens und Smartphones. Es funktioniert gut auf allen Mobiltelefonen mit iOS, Android oder Windows OS.
Flexible Bearbeitung
Das Blazor Grid führt Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge einfacher mit einer Liste von Geschäftsobjekten oder einem Remote-Datendienst mithilfe eines Datenmanagers aus.
Erstellen Sie Ihre eigenen Vorlagenentwürfe
Ermöglicht Benutzern, benutzerdefinierte Benutzererfahrungen im Blazor Grid basierend auf ihren Anwendungsbedürfnissen mithilfe einer breiten Palette von Vorlagenoptionen zu erstellen.
Attraktive anpassbare Themes
Modernes Design mit über 5 integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Nutzen Sie das Online Theme Studio-Tool, um Themes einfach anzupassen.
Einfacher Export und Druck
Exportieren Sie das Data Grid in verschiedene Dateiformate, einschließlich Excel, PDF und CSV. Drucken Sie alle Zeilen, unabhängig von der Anzahl der Seiten, sowie die aktuell angezeigte Seite.
Globalisierung und Lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen, sie zu verwenden, indem Datumsangaben, Währungen und Nummerierungen an die Präferenzen angepasst werden.
KI-bereites Raster für intelligentere Daten
Erstellen Sie intelligentere Blazor-Anwendungen mit einem DataGrid, das Out-of-the-Box KI-Funktionen unterstützt. Fügen Sie semantische Suche und Anomalieerkennung hinzu, um Erkenntnisse zu gewinnen und die Datenzuverlässigkeit zu verbessern.
-
Semantische Suche: Verbinden Sie Ihr Modell zur Verarbeitung natürlicher Sprache (NLP), um Abfragen in natürlicher Sprache zu ermöglichen, wodurch die Notwendigkeit exakter Schlüsselwörter entfällt.
- Sehen Sie, wie man semantische Suche hinzufügt
-
Anomalieerkennung: Integrieren Sie Machine-Learning-Dienste (ML), um unregelmäßige Trends zu erkennen und Datenprobleme zu verhindern.
- Sehen Sie, wie man Anomalieerkennung hinzufügt
Blazor DataGrid Code-Beispiel
Beginnen Sie ganz einfach mit dem Blazor DataGrid mit nur wenigen einfachen C#-Codezeilen, wie unten gezeigt. Entdecken Sie auch unser Blazor DataGrid-Beispiel, das Ihnen zeigt, wie Sie das Blazor Grid rendern und konfigurieren.
In Blazor Playground bearbeiten
@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; }
}
}Adaptives UI-Layout
Die Benutzeroberfläche des Blazor Data Grid ist für kleine Bildschirme angepasst und neu gestaltet, um eine hervorragende Ansicht und Benutzerfreundlichkeit zu gewährleisten. Zu ihren Funktionen gehören Filter, Sortierung, Suche, Spaltenauswahl, Spaltenmenü, Pager-Dropdown und Bearbeitungsdialoge, die sich an die Bildschirmgröße anpassen und Zeilenelemente vertikal rendern.
Spalte
Spalten definieren das Schema der Datenquelle in der Blazor DataGrid Komponente. Es unterstützt Formatierung, automatische Spaltengenerierung, Spaltendefinitionen, das Einfrieren von Zeilen und Spalten, Spannen von Spalten, Textumbruch, Spaltenauswahl, Spaltenmenü und andere Funktionen.
Paging
Durch Paging kann ein Datensegment aus der zugewiesenen Datenquelle angezeigt werden. Das Blazor DataGrid bietet eine integrierte Pager-Benutzeroberfläche mit Optionen zur Anpassung des gesamten UI. Es verfügt auch über einen On-Demand-Paging-Modus für den effektiven Datenabruf von Remote-Webdiensten.
Sortierung
Sortieren Sie Zeilen entweder in aufsteigender oder absteigender Reihenfolge nach einer Spalte, indem Sie einfach auf den Header klicken. Sortieren Sie Daten aus mehreren Spalten, indem Sie die Strg-Taste + Header-Klick gedrückt halten. Darüber hinaus können Sie Ihre eigene benutzerdefinierte Sortierlogik basierend auf den Anwendungsanforderungen im Blazor DataGrid definieren.
Filterung
Filtern hilft, bestimmte oder verwandte Datensätze anzuzeigen, die ein gegebenes Kriterium im Datenraster erfüllen. Das Blazor DataData unterstützt verschiedene Filtertypen, einschließlich leistungsstarker Excel-ähnlicher Filter. Wählen Sie den geeigneten Filtertyp, definieren Sie Ihre eigene benutzerdefinierte Filterlogik und passen Sie die Filter-Benutzeroberfläche an die Anforderungen der Anwendung an. Diakritische Zeichen können ebenfalls gefiltert werden.
Auswahl
Das Blazor DataGrid ermöglicht die Auswahl von Zeilen oder Zellen. Eine oder mehrere Zeilen oder Zellen können auch durch Halten von Strg oder Befehl oder programmgesteuert ausgewählt werden.
Bearbeitung
Das Blazor DataGrid bietet volle Unterstützung für Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge (CRUD). Neben integrierten Editor-Komponenten zum Bearbeiten eines bestimmten Spaltenwerts können benutzerdefinierte Editor-Komponenten mithilfe von Vorlagen entsprechend den Anwendungsanforderungen erstellt werden. Mithilfe eines Datenmanagers können Sie Bearbeitungsvorgänge mit Array-Sammlungen oder Remote-Datendiensten durchführen.
Gruppierung
Gruppieren Sie Zeilen, um die Daten in einer organisierten hierarchischen Struktur in aufsteigender oder absteigender Reihenfolge anzuzeigen, um die einfache Erweiterung und den Zusammenbruch von Datensätzen zu erleichtern. Es gibt eine Option zum Gruppieren von Datensätzen der gewünschten Spalte durch einfaches Ziehen und Ablegen dieser Spalte in einem interaktiven Ablagebereich.
Aggregation
Aggregate für Spaltenwerte können einfach mit der Aggregationsfunktion angezeigt werden. Aggregate können angepasst werden, um Werte in einzelnen Zusammenfassungszeilen, einzelnen Gruppenzusammenfassungszeilen oder Gruppenbeschriftungszeilen anzuzeigen.
Feste Zeilen und Spalten
Fixierte Zeilen und Spalten sind oben und links, rechts, beidseitig oder an fester Position sichtbar, wodurch der restliche Rasterinhalt scrollbar wird. Diese Funktion wird hauptsächlich zum Vergleich von Zellenwerten in der JavaScript DataGrid-Komponente verwendet.
Haftende Kopfzeile
Die Kopfzeile des Blazor Data Grid muss beim vertikalen Scrollen des Dokuments in einer festen Position bleiben, um den Inhalt des Datenrasters zusammen mit der Spaltenüberschrift zu visualisieren.
Zeilen-Ziehen und Ablegen
Das Blazor Grid ermöglicht Benutzern das Ziehen und Ablegen von Zeilen in ein anderes DataGrid oder eine benutzerdefinierte Komponente. Benutzer können auch Zeilen innerhalb desselben DataGrid mit dem Zieh-Symbol ziehen und ablegen und Zeilen zwischen verschiedenen Gruppen übertragen.
Master-Detail-Raster
Blazor Master Detail Grid ist ein Anwendungsfall, bei dem die Details eines Datensatzes in einem separaten Datenraster angezeigt werden, indem man auf eine bestimmte Zeile klickt.
Blazor Live DataGrid
Live Blazor DataGrid ist für die Echtzeitverarbeitung und Aktualisierung einer großen Anzahl von Datensätzen optimiert und eignet sich für die Bindung von Finanzdatensätzen und mehr.
Zusätzliche Funktionen
Zeilenhöhe
Die Zeilenhöhe ist ein wichtiger Faktor bei der Anzeige der Anzahl von Datensätzen im Ansichtsbereich und kann leicht an die UI-Anforderungen der Anwendung angepasst werden. Es ist auch möglich, die Zeilenhöhe bedingt festzulegen.
In die Zwischenablage kopieren
Die Zwischenablage ermöglicht es Benutzern, Daten ausgewählter Zeilen oder Zellen in diese zu kopieren. Verwenden Sie die Tastenkombinationen Strg+C und Strg+Umschalt+H, um Daten mit bzw. ohne Header zu kopieren.
Kontextmenü
Führt verschiedene Aktionen in einem JavaScript DataGrid über das Popup-Menü aus, das beim Rechtsklick auf die Zelle, den Header oder den Pager erscheint. Zusätzlich zu den integrierten Standardmenüpunkten können benutzerdefinierte Kontextmenüpunkte hinzugefügt werden.
Breite und Höhe
Legen Sie die Eigenschaften für Breite und Höhe fest, um die Größe des Datenrasters zu ändern. Wenn der Inhalt das Rasterelement überläuft, erscheinen horizontale und vertikale Bildlaufleisten. Um den übergeordneten Container des Datenrasters auszufüllen, setzen Sie einfach Höhe und Breite auf 100 %.
Gestapelte Kopfzeilen
Gestapelte Kopfzeilen ermöglichen das Gruppieren und Visualisieren von Spaltenkopfzeilen in einer gestapelten Weise. Die Anzahl der stapelbaren Spalten ist unbegrenzt. Führen Sie alle Blazor Data Grid-Aktionen auch dann aus, wenn die Spalten gestapelt sind.
Tooltip
Verbessern Sie die Benutzerfreundlichkeit mit Tooltips, die reichhaltige Inhalte im Blazor DataGrid unterstützen. Zeigen Sie Bilder, Symbole und benutzerdefinierte Komponenten neben einfachem Text an, um kontextreichere und visuell ansprechendere Interaktionen zu ermöglichen, die die Klarheit und Benutzerfreundlichkeit innerhalb der Rasteroberfläche verbessern.
Barrierefreiheit
Tastaturnavigation
Das Blazor DataGrid stellt sicher, dass jede Zelle über die Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können allein über Tastaturkommandos ausgeführt werden; keine Mausinteraktion erforderlich. Dies hilft bei der Erstellung hochgradig zugänglicher Anwendungen mit dieser Komponente.
Screenreader
Die Blazor DataGrid-Ansicht bietet vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Blazor Data Grid-Benutzeroberfläche enthält kontrastreiche visuelle Elemente, die sehbehinderten Menschen ein optimales Seherlebnis ermöglichen. Außerdem sind gültige UI-Beschreibungen über assistierende Technologien wie Screenreader leicht zugänglich.
Rechts nach links (RTL)
Rechts-nach-links-Rendering ermöglicht die Anzeige des Textes und des Layouts des Blazor DataGrid von rechts nach links. Dies verbessert die Benutzererfahrung und Zugänglichkeit für RTL-Sprachen.
Mobil-optimiert und touch-freundlich
Das Blazor Grid verfügt über ein hochflexibles Layout und ein fein optimiertes Design für Desktops, Touchscreens und Smartphones.
Touch-Unterstützung
Benutzerfreundliche Touch-Gesten und ein interaktives UI-Design tragen dazu bei, die beste Benutzererfahrung zu erzielen. Alle Blazor Grid-Funktionen funktionieren auf Touch-Geräten ohne Konfiguration.
Responsiver Pager
Der Blazor DataGrid-Pager agiert intelligent und ändert seine gesamte Benutzeroberfläche responsiv basierend auf der Rasterdimension. Sein optimiertes Design bietet die beste UI-Interaktion auf verschiedenen Geräten.
Andere unterstützte Frameworks
Das DataGrid 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 DataGrid funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Sie sind sich nicht sicher, wie Sie Ihr erstes Blazor DataGrid erstellen sollen? Unsere Tutorial-Videos und Dokumentation können Ihnen helfen.
Ich möchte es jetzt ansehen Beginnen Sie mit Blazor Server-side DataGridBlazor-Komponenten – über 145 Benutzeroberflächen- und DataViz-Komponenten
ALLE KOMPONENTEN
SMARTE KOMPONENTEN
RASTER
DATENVISUALISIERUNG
EINGABEN
EDITORS
DROPDOWN-MENÜS
SCHALTFLÄCHEN
INTERAKTIVER CHAT
NAVIGATION
BENACHRICHTIGUNG
FORMULARE
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® Blazor DataGrid wählen?
Die Syncfusion Blazor Grid Komponente unterstützt folgende Funktionen:
Lädt Millionen von Datensätzen in nur einer Sekunde.
Flexible Datenbindung mit Unterstützung für Datenquellen wie Web API, OData, Entity Framework und mehr.
Reiche UI-Interaktion und Tastaturnavigation in Blazor-Apps sowohl auf Server- als auch auf Clientseite (WebAssembly).
Vollgepackt mit einer Reihe von Funktionen mit Anpassungsoptionen, die sich für die Erstellung komplexer, groß angelegter Anwendungen eignen.
- Eines der besten Blazor DataGrids auf dem Markt, das eine funktionsreiche Benutzeroberfläche für die Interaktion mit der Software bietet.
Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobil-touch-freundlich und responsiv.
Umfangreiche Demos, Dokumentation und Videos zum schnellen Erlernen und Einstieg in Blazor DataGrid.
Was kostet Syncfusion Blazor DataGrid?
Wir verkaufen das Blazor DataGrid nicht separat. Es ist nur im Rahmen der Syncfusion Teamlizenz erhältlich, die über 145 Blazor-Komponenten, einschließlich des DataGrid, enthält. Der Preis der Teamlizenz beginnt bei $395 pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Darüber hinaus können wir möglicherweise zusätzliche Rabatte basierend auf aktuellen Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Wo finde ich die Syncfusion Blazor DataGrid-Demo?
Sie finden unsere Blazor DataGrid-Demo, die zeigt, wie Sie das DataGrid rendern und konfigurieren.
Kann ich die Syncfusion Blazor DataGrid-Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres Blazor DataGrid, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur unwesentlich mehr kostet als einige andere Anbieter für ihre DataGrid-Komponente allein verlangen. Wir haben auch die Erfahrung gemacht, dass unsere Kunden in der Regel mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle 1,600+ Komponenten und Frameworks für eine Abonnementgebühr anzubieten, die bei $395 pro Monat für ein Team von 5 Entwicklern beginnt. Darüber hinaus können wir möglicherweise Rabatte basierend auf aktuellen Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Kann ich das Syncfusion Blazor DataGrid kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Eine kostenlose Gemeinschaftslizenz ist jedoch auch für Unternehmen und Einzelpersonen verfügbar, deren Organisationen weniger als 1 Million USD Jahresbruttoumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit Syncfusion Blazor DataGrid an?
Ein guter Ausgangspunkt wäre unsere umfassende Dokumentation zum Einstieg.
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.
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
Von Benutzern auf der ganzen Welt bewertet
Syncfusion Blazor DataGrid Ressourcen
UI Kits
Figma-Download
Figma-Download
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.
Aktuelle Aktivitäten in Blazor DataGrid Tutorials und Blogs
Die Blazor DataGrid Tutorial-Videos und Blogbeiträge werden Sie bei der Erstellung Ihrer ersten App mit den Blazor-Komponenten anleiten. Sie geben Ihnen Ideen zur Problemlösung, beschreiben Funktionen und deren Funktionsweise, kündigen die Verfügbarkeit neuer Funktionen an, erklären Best Practices für Blazor DataGrid-Komponenten und beschreiben Beispielszenarien mit den Blazor DataGrid-Komponenten. Sehen Sie sich unsere jüngsten Aktivitäten in unserem Blog und unseren Tutorial-Videos für Blazor DataGrid an.
