Blazor Grid Component Overview
This article provides a quick introduction to get your first Blazor data grid component up and running in a few seconds. There is a video tutorial and a list of the key features.
The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features. They cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation and accessibility support.
The Telerik Blazor grid is built on native Blazor from the ground up, by a company with a long history of making enterprise-ready Grids. This results in a highly customizable Grid that delivers lighting fast performance.
The Grid component is part of Telerik UI for Blazor, a
professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Data Grid
- Use the
TelerikGrid
tag. - Assign the Grid
Data
attribute to anIEnumerable
property. - Enable some data operations like paging, sorting or filtering.
- Add
GridColumn
instances under theGridColumns
tag. Each columnField
should point to the model property to display. Usenameof()
or the plain field name.
Get started with the Blazor Grid
@* Telerik Blazor Grid with some common features *@
<TelerikGrid Data="@GridData"
Pageable="true"
Sortable="true"
FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field="Name" Title="Product Name" />
<GridColumn Field="Price" />
<GridColumn Field="@(nameof(Product.Released))" />
<GridColumn Field="@(nameof(Product.Discontinued))" />
</GridColumns>
</TelerikGrid>
@code {
List<Product> GridData { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 30).Select(x => new Product
{
Id = x,
Name = "Product name " + x,
Price = (decimal)(x * 3.14),
Released = DateTime.Now.AddMonths(-x).Date,
Discontinued = x % 5 == 0
}).ToList();
base.OnInitialized();
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}
Video Tutorial
If you prefer video instructions, watch this short Blazor Grid video tutorial. It covers to 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 steps to data bind a Grid:
-
Provide the data. There are two alternative ways to do this:
- Set the Grid
Data
attribute. In this case, the Grid will hold all the data and will perform all data operations internally (sorting, paging, filtering, grouping, aggregates, etc.). This approach provides simplicity. - Use the Grid
OnRead
event and pass the data to the event argument. In this case, the Grid will hold only the current page of data items. The component will fireOnRead
again for every data operation and expect to receive the expected items. This approach provides flexibility and performance if the total number of data items is large.
The Grid Data Binding article provides detailed information and examples for binding the Grid to various data sources.
- Set the Grid
-
Configure the Grid to display the data. Again, there are two ways to do this:
- Generate some or all columns automatically. The autogenerated columns will depend on the Model properties and Data Annotations.
- Define GridColumn instances and set their
Field
attribute. The field is required for data and CRUD operations. The field type determines the sorting, filtering and editing behavior. Some columns do not need a field, for example the CommandColumn. To customize data rendering and column behavior, use templates and all the column settings.
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 experience - incell, inline and popup.
See Grid CRUD Operations Overview for more details.
Virtualization
The Blazor Grid features UI virtualization to improve browser performance:
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
- Reodering
- 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 Grid Features
- Selection - select one or multiple rows via clicks or checkboxes
- 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.
Grid Attributes
The following table lists Grid attributes, which are not related to other features on this page. Check the Grid API Reference for a full list of properties, methods and events.
Attribute | Type and Default Value | Description |
---|---|---|
Class |
string |
Renders additional CSS class to the div.k-grid element. Use it to apply custom styles or override the theme. For example, change the Grid font size. |
Height |
string |
Sets a height style in any supported CSS unit. |
Navigable |
bool |
Enables keyboard navigation. |
Width |
string |
Sets a width style in any supported CSS unit. The Grid has no default width, but expands horizontally to fill its container. |
Grid Reference
The Grid has methods to execute actions such as:
- refresh the data
- export to Excel and other formats
- resize columns to fit the content
- get or set the Grid state
To execute these methods, obtain reference to the Grid instance via @ref
.
Use a Telerik Blazor Grid reference
<TelerikButton OnClick="@AutoFit">Autofit All Columns</TelerikButton>
<TelerikGrid Data="@GridData" @ref="TheGrid" Width="600px">
<GridColumns>
<GridColumn Field="@(nameof(GridModel.Id))" />
<GridColumn Field="@(nameof(GridModel.Text))" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<GridModel> TheGrid { get; set; }
void AutoFit()
{
TheGrid.AutoFitAllColumns();
}
IEnumerable<GridModel> GridData = Enumerable.Range(1, 5)
.Select(x => new GridModel
{
Id = x,
Text = "some longer text here that will not fit on a single line and we would like to expand it " + x
});
public class GridModel
{
public int Id { get; set; }
public string Text { get; set; }
}
}