Blazor Data Grid Component

The Blazor Data Grid is a full featured data visualization and editing component that works in both Blazor WebAssembly (WASM) and server-side Blazor apps. You can easily display large amounts of data in a table, then page, filter, sort and group over it, as well as edit rows and validate the user input. 

All you need to do is provide data to the grid, enable the features you want through simple parameters and we will do the rest to ensure beautiful display and great performance. You can also tweak the visualization through templates and your own CSS styles. 

Large data sets are commonly split into smaller pages of date for the convenience of your end users and to improve your app performance. The grid can do this for you automatically, just enable a single property. 

Blazor Grid Paging Demo

The Telerik Blazor Grid component lets your end users edit the data. They can alter or delete existing records or insert new ones—all the CRUD operations are conveniently exposed through events that give you the user action and the model, so all you have to do is add your business logic and call your data service. Excel-like editing is also supported in which the number of keystrokes is greatly reduced – hitting Enter will store the current cell value, move on to the next cell in the column, and automatically select its content so that the next keystroke will override it. 

The grid also offers three built-in editing modes:

• Popup

• Inline where the entire row is being edited and saved at the same time,  

• InCell which lets you quickly edit only a certain field and send up the changes. 

Telerik UI for Blazor Grid Editing examples 

Through the Multi-checkbox Filters, users can easily filter Grid data by a chosen value. This type of filter functions similarly to Microsoft Excel filtering and has many applications—from finding all sales made by an employee to finding all inventory items in a given category.

Sometimes it takes a while for your Grid to update some data on a heavily overloaded server. If you don’t want your users to stare at a blank screen during the operation, you can use the build-in Grid loading indicator to visually indicate that the data is being processed. The Grid is smart enough to show busy indicator when it detects detect a slow-running async data operation.

Check out the Grid Loading Animation demo page for an example on how to implement it.

You can group the grid according to the values in different fields to see relationships between them, aggregates over the given groups and nest groups within groups to explore the data. Just set the Groupable parameter to true and you can simply drag the column headers to group by them. 

Blazor Grid Grouping Demo

In addition to the row virtualization, you can add easily enable virtualization of the Grid columns. And the great thing is that you can have both rows and columns simultaneously virtualized for optimal performance when dealing with large volume of data rows and columns in your Blazor Grid.    

Grid Column Virtualization Example 

The Grid allows column resizing both programmatically (via methods) by developers and manually by end-users. End-users can resize columns by dragging the column border and dropping it to their desired location. As a developer, you can use three methods to resize the Data Grid columns: 

•  AutoFitColumn adjusts the width of a column of your choice 

•  AutoFitColumns adjusts the width of multiple columns of your choice 

•  AutoFitAllColumns adjusts the width of all columns 

When you declare the columns in a grid, you would usually put the most important ones first. A user may have a different need, task or preference, though, and the Telerik Blazor Grid lets them rearrange columns to fit their needs. 

Column Reordering Demo 

To simplify Grid columns definition, you can benefit from the automatic column generation feature. For cases when you want to display a list of columns in a Grid that are an exact match to your data model you can visualize, update, delete and insert records without extra overhead – all you have to do is set the Grid AutoGenerateColumns parameter to “true”. 

Example of Grid Automatically generated columns.  

Grid automatically generated columns work well together with column virtualization in Blazor Grid.  

Check out an example of how to enable auto generated virtualized columns in Blazor Grid. 

In a grid with many columns, the users often scroll to the left and right and want to keep certain important columns visible at all times – such as IDs, command column to edit, selection column, or anything else of value. The Telerik Blazor grid brings the Excel Frozen Columns feature to the web with even more flexibility – you can keep columns frozen in the beginning, at the end, and even columns from the middle of the grid can be always visible and stick to one end. 

Check out the Frozen Columns 

At the end of the day, people want to shut down their computers, then come back tomorrow exactly where they left off. The Telerik Blazor grid lets them have this experience in a web app by saving and loading its state from any storage. Every user action that changes the grid display (such as paging, filtering, even editing) fires up an event that you can use to record its state so you can restore it as-is when the user logs back in, or even on the click of a button. 

Grid State also lets you invoke these operations from other places in your app logic. For example, if something else happens in the app, you can tell the grid to filter by a certain field and value, or to go back to the first page. 

Grid State Management examples – persist (save and load), and change programmatically. 

Thanks to the out-of-the-box support of complex (nested, navigation) properties, the Telerik Blazor Grid can be bound to both primitive types and complex model objects. 

An example on how to use complex models with navigation properties in Blazor Grid.  

The row has a lot of details, but not all of them are important. Hide them in the Detail Template so the user can expand the row and see them when needed, without cluttering the main table.  

The hierarchy feature of the grid is flexible and lets you drill down into data, expand and collapse the rows you want to look into and show data on demand. You can devise any layout you want, and put a grid there to showcase hierarchical relationship between the nested grid and its parent row. 

See the Hierarchy Demo 

When users highlight a certain row, you can use that information to show more data, other components or simply collect a list of their choices. The grid exposes all of this through single and multiple row selection modes, and also lets you select all items on the current page or across the entire grid, which comes in handy for batch operations like deleting many records at once, or moving data from one place (or state) to another. Select rows by clicking them or add a checkbox for selection to preserve the click interaction for cell editing.  

The selected items offer a lot of flexibility – you can use two-way binding to predefine items or get your collection updated automatically; or you can consume an event so you can react to user activity and update your app. 

Check out the row selection 

In the simplest case, you just point the data parameter of the Blazor Grid to your data collection and define the columns you want in it. The grid will do everything else for you (paging, sorting, filtering and so on). 

Grid Data Binding examples 

You can improve performance by loading only the current page of data on demand using an IQueriable collection powered by EntityFramework (for a server-side Blazor app), or implementing your own data operations through the OnRead event (applies to both WASM and server-side Blazor). The custom data loading also applies to all other grid features such as paging, filtering and virtual scrolling, so you can make the most efficient database queries. 

Examples of optimizing the data operations in the grid for better performance 

The Telerik Blazor Grid responds to the user culture automatically – for example, formats in numeric inputs and date inputs use the current user culture, and strings such as pager tooltips and command buttons’ texts can be easily translated. 

Users with disabilities need to use your site as well, and the Telerik Grid component helps in that regard – it uses semantic markup and covers the current accessibility standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers). Moreover, you can navigate around the grid and invoke all actions with the keyboard alone. 

Blazor Grid Keyboard Navigation Demo