Blazor Grid Component Overview

Updated on Aug 28, 2026

This article provides a quick introduction to get your first Blazor data grid component up and running. The article includes a video tutorial and a list of key features.

This article applies to Telerik UI for Blazor, .NET 8 and later, and the Grid component.

The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features that cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation, and accessibility support.

Jumpstart Your Grid

With the Agentic UI Generator, you can build components and layouts using natural language prompts — directly inside AI-powered IDEs like VS Code and Cursor. Get intelligent assistance with component implementation, styling, layout design, and iconography powered by our documentation and APIs.

Try the Agentic UI Generator

Creating Blazor Grid

1. Use the TelerikGrid tag.
2. Assign the Grid Data parameter to an IEnumerable<T> property, or use the OnRead event. This example uses Data. The Grid Data Binding article compares the two alternatives.
3. Optionally, enable data operations such as paging, sorting, or filtering.
4. Add GridColumn instances under the GridColumns tag. Each column Field should point to the model property to display. Use nameof() or the plain field name. Define user-friendly column Titles or DisplayFormat for numeric and date values.

Get started with the Blazor Grid

Loading ...

Blazor Grid Video Tutorial

If you prefer video instructions, watch this short Blazor Grid video tutorial. It covers the following topics:

• Introduction to the Telerik Blazor Grid
• Add TelerikRootComponent to MainLayout
• Add a Blazor Grid
• Configure columns
• Enable additional features

Data Binding

There are two main ways to provide data to the Grid: through the Data parameter and through the OnRead event. Data provides simplicity, while OnRead allows more flexibility in complex scenarios and can improve performance when the data source contains many records.

Data Operations

The Blazor Grid supports all fundamental data operations out-of-the-box:

• Paging or alternatively, virtual scrolling
• Sorting
• Filtering
• Grouping. The Grid can also load the data for each group on demand.
• Aggregates

Editing

The Grid can perform CRUD operations on its current data - add, edit and delete rows. It exposes events that let you control the editing and commit changes to the actual data source.

The Grid offers several editing modes with different user experiences: in-cell, inline, and popup.

See Grid CRUD Operations Overview for more details.

Virtualization

The Blazor Grid features UI virtualization to improve browser performance:

• Row virtualization
• Column virtualization

Column Features

The Grid columns offer a rich set of functionality to enable immense flexibility for your application scenarios. The main column features include:

• Display Format for numeric and date values
• Resizing
• Reordering
• Column Menu to control data operations and column visibility
• Frozen columns, which do not scroll horizontally (also called locked columns)
• Multi-column Headers to group multiple column headers under a single parent header
• Column Events
• Visibility and Width

Templates

The Grid supports custom content in various parts of the component such as data cells, headers, footers, editors and more. See Grid Templates.

More Blazor Grid Features

• Selection—select one or multiple rows through clicks or checkboxes or select one or multiple cells through clicks.
• State—get or set the Grid configuration programmatically.
• Toolbar—define user actions in a toolbar above the header cells.
• Hierarchy—nest Grids and visualize parent-child relations between data records.
• Drag and drop rows—move rows in a Grid or between different Grids.
• Loading animation—show a loading animation to improve user experience during long data operations.
• Scrolling—the Grid will show standard scrollbars automatically if the data does not fit the current component width and height.
• Highlighting—highlight rows or cells programmatically to draw attention to important data.

Smart AI Features

The Grid supports AI-enabled natural language commands for filtering, sorting, grouping, highlighting, column operations, paging, selection, and exporting. The Grid Smart AI Features overview describes the supported operations and the AI tools that you can add to the Grid toolbar.

Blazor Grid API

See the Grid API Reference for the full list of Grid parameters, methods, and events.

Blazor Grid Reference and Methods

The Grid has methods to execute actions such as:

• rebind to refresh the data
• export to Excel and other formats
• automatically resize columns to fit their content
• get or set the Grid configuration state
• get the dragged data item and its drop index from the destination Grid instance

To execute these methods, obtain reference to the Grid instance via @ref.

How to obtain a Grid reference and call methods

Loading ...

Next Steps

• Explore Grid data binding
• Learn about Grid columns
• Control the Grid with natural language prompts

See Also

• Live Demos: Grid
• Grid API Reference