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.

Start a free trial

To create a basic Telerik Grid:

use the TelerikGrid tag
set its Data attribute to the variable that will hold your collection of data
under its GridColumns tag, set the desired GridColumn instances whose Field property 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

Blazor DataGrid Component Example

Video tutorial - Get started with Telerik Data Grid for Blazor

Data Binding

To show data in a grid, you need to define GridColumn instances - they take a model Field and expose settings for templates, grouping and reordering. To edit data or invoke custom logic, you define a CommandColumn.

The Telerik Blazor Grid is data source agnostic - you can use any database and service according to your project, you only need to get the collection of data models to the grid in the view-model of the component hosting it.

The following list of resources provides examples for data binding a grid in various scenarios:

Basic example, tutorial video and notes - Grid Data Binding Overview. Also lists the features (parameters) of a bound column.
Optimizing the data source queries - see the Notes section in the article above. In a server-side app, an IQueriable that ties to an appropriate context (such as EntityFramework) that can optimize the LINQ queries the grid generates is a quick option. For full control, use the OnRead event.
SQL (or any other) database - you can find examples in our online demos. You can see an offline version of the demos project in the demos folder of your installation (automated or archive). They showcase an EntityFramework context using an SQL database that provides data to a grid through a service, which is a common architecture for decouping the front-end from the actual data source that you can apply to any database.
- The CRUD sample project our extensions for Visual Studio and Visual Studio Code can generate for you showcases a similar architecture that you can use as a starting point.
WebAPI data source - you can see how to send an appropriate request for data and return an optimized query in the following sample projects: Grid DataSourceRequest on the server. This is a flexible approach that you can use for any type of service you have - serializing and deserializing the data according to the application logic and needs, and optimizing the database queries on the backend.
OData data source - an extension method we provide lets you make OData v4 queries as shown in the following example: Grid and OData.
DataTable, ExpandoObject collection - If you don't have actual strongly typed models (yet) and you use ExpandoObject, or your backend comes from an older technology and still returns DataTables, the grid can accommodate such dynamic data types. You can get started from our examples on how to bind the grid to a ExpandoObject collection and to a DataTable which also support editing.
gRPC - the gRPC tooling supports .NET Core, and as of mid-June 2020, there is a package that brings it to WebAssembly. You can find a basic example and more resources to get you started with gRPC in Blazor in the Grid Data from gRPC Sample Project.

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.

Selection

The grid offers single or multiple selection modes. You can read more about this feature in the Selection article.

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.

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's Width and Height parameters 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).

For example, 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;
    }
</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

Blazor Grid Component Reduced Font Size Example

Blazor Grid Component Overview

Data Binding

Blazor Grid Reference

Autogenerated Columns

Editing

Paging

Sorting

Filtering

Grouping

Selection

Scrolling

Frozen Columns

State

Styling

See Also

Was this article helpful?

Getting Started

Community

Support Resources

Sample Applications