Blazor Grid Component Overview
This article provides a quick introduction so you can get your first Blazor data grid component up and running in a few seconds, a video tutorial, and a list of the key features it provides.
The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features covering 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 Blazor data grid that delivers lighting fast performance and is highly customizable.
The Grid component is part of Telerik UI for Blazor, a
professional grade UI library with 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To create a basic Telerik Grid:
- use the
TelerikGridtag - set its
Dataattribute to the variable that will hold your collection of data - under its
GridColumnstag, set the desiredGridColumninstances whoseFieldproperty points to the name of the model field
Get started with the grid by providing it with a data collection and enabling its key features
General grid with its most common features
<TelerikGrid Data="@MyData" Height="400px"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Resizable="true" Reorderable="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
The result from the code snippet above
Video tutorial - Get started with Telerik Data Grid for Blazor
Data Binding
To show data in a Grid, you need to define GridColumn instances or allow the Grid to generate columns automatically. Declared columns take a model Field and expose settings for templates, grouping and reordering. To edit data or invoke custom logic, you define a CommandColumn.
The Grid Data Binding article provides detailed information and examples about binding the Grid in different scenarios and to various data sources.
Loading Animation
When the user performs data operations in the grid, the grid will display a loading sign over itself when it detects a long-running operation (over 600ms). This improves the user experience so they know they have to wait for the action to complete, and also prevents repeated actions.
The operations include paging, filtering, sorting, grouping, expanding groups with load-on-demand; editing, inserting and deleting records.
The grid will not, however, display a loading animation during its initial rendering. It cannot know when or even if data will be provided to it, and having an automatic loading sign appear can either make it show up indefinitely, or it could prevent the user from altering any saved grid state (such as changing filters). If you want a loading animation on the initial load, you can add a LoaderContainer component with the desired Visible logic.
When using the OnRead event, the loading sign will display every time its event handler is called, which will include the initial load of data - the grid will raise that request every time.
You can see both scenarios in action in the Live Demo: Grid Loading Animation.
Blazor Grid Reference
The grid is a generic component, and to store a reference, you must use the model type that you pass to its Data when declaring the variable.
Store a reference to a Telerik Grid
@using Telerik.Blazor.Components
<TelerikGrid Data="@MyData" @ref="theGridReference">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.ID))">
</GridColumn>
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
Telerik.Blazor.Components.TelerikGrid<SampleData> theGridReference;
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
{
ID = x,
Name = "name " + x
});
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
}
}
Autogenerated Columns
You can autogenerate columns in a Grid for each public property in its model. For more information about this feature you can read the Autogenerated Columns article.
Editing
The grid can perform CRUD operations on its current data collection and exposes events that let you control the operations and transfer changes to the actual data source. The CRUD Operations Overview article offers more details on this.
The grid offers several editing modes with different user experience through the EditMode property that is a member of the GridEditMode enum:
-
Incell- editing is done in the current cell with a double click -
Inline- editing is done for the entire row with an Edit Command Button -
Popup- editing is done in a popup for the entire row with an Edit Command Button
Paging
The grid supports paging of the data out of the box. You can read more about it in the Paging article. An alternative to standard paging is Virtual Scrolling that provides a different user experience.
Sorting
The grid can sort data automatically. You can read more about this feature in the Sorting article.
Filtering
The grid can filter data automatically. You can read more about this feature in the Filtering article.
Grouping
The grid can group data automatically. You can read more about this feature in the Grouping article.
Column Features
The columns of the Grid are one of its main building blocks and they offer a rich set of functionality to enable immense flexibility for your application scenarios.
Column features include
Selection
The grid offers single or multiple selection modes. You can read more about this feature in the Selection article.
Toolbar
You can define user actions in a dedicated toolbar. For the moment, they are mostly custom actions, but in future versions you will be able to add features like exporting there.
Column Menu
The Grid allows you to setup a menu for it's columns. It enables you to perform high-level customization like sorting, filtering, showing or hiding columns and freezing or unfreezing them. You can read more about this feature in the column menu article.
Scrolling
The grid offers two modes of scrolling through its ScrollMode parameter that takes a member of the Telerik.Blazor.GridScrollMode enum:
-
Scrollable- the default setting - the scrollbars are controlled by the grid'sWidthandHeightparameters and the data shown in it. If the rendered rows are taller than the height, there will be a vertical scrollbar. If the sum of the column widths is larger than the width, there will be a horizontal scrollbar (read more in the Column Width article). -
Virtual- this enables Virtual Scrolling.
The Grid offers Virtual horizontal scrolling. You can read more about this feature in the Column Virtualization article.
Frozen Columns
The grid lets you freeze one or more columns. You can read more about this feature in the Frozen columns article.
State
The grid provides its current state (such as filtering, sorting, grouping, selection and so on) through methods and events so you can store the grid layout for your end users - this lets them continue where they left off. You can read more about this in the Grid State article.
Styling
You can define your own content for column cells or even the entire row through Templates.
You can also set the Height of the grid, and you can use the Class to provide more complex CSS rules (like ones that will be inherited in a template).
Below, you can see examples on how to format the cells and the rows of the Grid based on certain conditions and how to take advantage of the elastic design.
Conditional Formatting
You can format the cells and rows of the Grid based on certain condition in the logic of the application.
To do so, use the OnCellRender and OnRowRender events and set the desired CSS class through the event handlers arguments.
Use the OnCellRender and OnRowRender events to customize the formatting of the Grid rows and cells based on conditions.
@* Conditional styling/formatting for a cell and row *@
<style>
.highlightCellBackGroud {
background-color: lightyellow;
}
.negativeValuesRowFormatting {
color: red;
}
.positiveValuesRowFormatting {
color: green;
}
</style>
<TelerikGrid Data="@GridData"
Height="400px"
Pageable="true"
Sortable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Resizable="true"
Reorderable="true"
OnRowRender="@OnRowRenderHandler">
<GridColumns>
<GridColumn Field="@(nameof(AccountingData.ClientId))" Width="120px" />
<GridColumn Field="@(nameof(AccountingData.ClientName))" Title="Client Name" Groupable="false" />
<GridColumn Field="@(nameof(AccountingData.DateOfLastReport))" Title="Date Of Last Report" />
<GridColumn Field="@(nameof(AccountingData.NetBalance))"
Title="Net Balance"
OnCellRender="@OnCellRenderHandler" />
</GridColumns>
</TelerikGrid>
@code {
void OnCellRenderHandler(GridCellRenderEventArgs args)
{
args.Class = "highlightCellBackGroud";
}
void OnRowRenderHandler(GridRowRenderEventArgs args)
{
AccountingData item = args.Item as AccountingData;
args.Class = item.NetBalance > 0 ? "positiveValuesRowFormatting" : "negativeValuesRowFormatting";
}
public List<AccountingData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<AccountingData>();
GenerateAccountingData();
base.OnInitialized();
}
public void GenerateAccountingData()
{
Random rand = new Random();
for (int i = 0; i < 50; i++)
{
GridData.Add(new AccountingData()
{
ClientId = i,
ClientName = $"Client {i}",
DateOfLastReport = DateTime.Today.AddDays(-i),
NetBalance = rand.Next(-15000, 25000)
});
}
}
public class AccountingData
{
public int ClientId { get; set; }
public string ClientName { get; set; }
public DateTime DateOfLastReport { get; set; }
public int NetBalance { get; set; }
}
}
The result from the code snippet above
Elastic Design
You can benefit from the elastic design the components expose to change their font size so they change dimensions.
Change font size and dimensions of a grid
The grid offers elastic design capabilities
<style>
div.smallerFont,
div.smallerFont .k-filtercell * {
font-size: 10px;
}
div.smallerFont .k-dropdown.k-header.k-dropdown-operator {
width: calc(8px + 2em) !important;
}
/* One example for altering content inside the cells - the inputs in InCell editing mode here
You can create similar rules as needed by inspecting the rendered HTML. This blog can help you do that
https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools
*/
div.smallerFont .k-grid-edit-cell input{
font-size: 10px;
}
</style>
<TelerikGrid Data="@MyData" Class="smallerFont"
Pageable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Sortable="true" Height="200px">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.ID))">
</GridColumn>
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
</GridColumn>
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date">
</GridColumn>
</GridColumns>
</TelerikGrid>
original:
<TelerikGrid Data="@MyData"
Pageable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Sortable="true" Height="200px">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.ID))">
</GridColumn>
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
</GridColumn>
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date">
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
{
ID = x,
Name = "name " + x,
HireDate = DateTime.Now.AddDays(-x)
});
}
The result from the reduced font size is a reduction in the overall size of the grid elements
