Skip to content

This sample explains how to create a Blazor DataGrid component and it contains such as excel like filtering, sorting, grouping and more.

Notifications You must be signed in to change notification settings

SyncfusionExamples/blazor-grid-getting-started

Repository files navigation

Blazor DataGrid - Getting Started

The Blazor DataGrid is a feature-rich component for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, Excel-like filtering, Excel, CSV, and PDF formats, aggregating rows, selection, and more.

Prerequisites

  • Visual Studio 2022

How to run the project

  • Checkout this project to a location in your disk.
  • Open the solution file using the Visual Studio 2022.
  • Restore the NuGet packages by rebuilding the solution.
  • Run the project.

Features and Benefits

High performance

Data Grid has optimized design for high-performance. Loads high volume of data, nearly 1 million+ records, within one second without any performance degradation with the help of row and column virtualization.

Data binding

Bind data seamlessly with various local and remote data sources such as JSON, RESTful services, OData services, and WCF services. It uses the data manager to handle data and supports customizing data requests and processing.

Editing

The Blazor Editable Grid provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor controls to edit a particular column value, using template support users can create custom editor controls that suit their application needs. It performs editing operations with list of business objects or remote data service with the help of data manager.

Aggregation

Aggregates for column values can be easily displayed using the aggregate feature. Aggregates can be customized to show their value in individual summary rows, individual group summary rows, or in group caption rows.

Responsive and touch-friendly

User-friendly touch gestures and an interactive UI design on Blazor DataGrid help produce the best user experience. All Data Grid features work on touch devices with zero configuration. It is a mobile-first approach component. Its responsive user interface adapts automatically to any device and provides the best user experience to interact with the component. In addition, it has an option to hide specific columns for particular screen sizes using column-based media query support.

Filtering

Filtering helps view particular or related records in the Blazor DataGrid, which meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Blazor Data Grid filter allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. It also has an option to filter diacritic characters in Blazor Data Grid.

Exporting Excel, Pdf and CSV

Easily export the Blazor Data Grid control in various file formats such as Excel, PDF, or CSV.

Selection

The Blazor DataGrid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.

Grouping

Supports row grouping to display data in an organized way. Data can be grouped in the ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.

Column behaviors

Columns define the schema of data source in Blazor DataGrid. It supports formatting, auto generating columns, column definitions, freezing rows and columns, column spanning, text wrapping, column chooser, column menu, and other important features.

Templates

Using templates, users can create custom user experiences in the Blazor DataGrid. It provides various template options to create custom headers, custom cell contents, custom rows, detail rows, toolbars, and custom editors for edit action.

Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. Allows the user to perform all Blazor DataGrid actions, even when the columns are stacked.

Sorting

The Blazor DataGrid is a sortable grid that allows users to sort rows either in the ascending or descending order against a column by simply clicking on the header. Sort multiple columns’ data by holding Ctrl key + header click.

Paging

Through paging, a segment of data can be viewed from the assigned data source. The Blazor DataGrid offers built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services.

Live DataGrid

Blazor Live DataGrid is optimized for handling and updating large number of records at real-time suitable for binding financial records and more.

Master-Detail Grid

Blazor Master Detail Grid is a use case scenario, in which the details of a Master DataGrid record, is viewed in a separate Detail DataGrid by clicking the particular row. Simply click the row in master DataGrid, which shows the details in another Grid.

Not sure how to create your first Blazor DataGrid? Our documentation can help

Related links

Learn More about Blazor DataGrid

Download Free Trial

Pricing

Online Examples

Community Forums

Documentation

Suggest a Feature

About Syncfusion Blazor Components

We have other popular Blazor Components such as Charts, Scheduler, Diagram, Word Processor, and more.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter(Beta)), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[email protected] | Toll Free: 1-888-9 DOTNET

About

This sample explains how to create a Blazor DataGrid component and it contains such as excel like filtering, sorting, grouping and more.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •