Skip to content

Marketing/dtc 173 grid overview #3859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
antonmironovv wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Marketing/dtc 173 grid overview #3859

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75ca0a2
Update Grid overview for marketing SEO recommendations - DTC-173
antonmironovv Aug 17, 2026
e5fc929
Fix Grid overview review comments
antonmironovv Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 34 additions & 22 deletions components/grid/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,23 @@ components: ["grid"]

# Blazor Grid Component Overview

This article provides a quick introduction to get your first <a href="https://demos.telerik.com/blazor-ui/grid/overview" target="_blank">Blazor data grid component</a> up and running in a few seconds. There is a video tutorial and a list of the key features.
This article provides a quick introduction to get your first <a href="https://demos.telerik.com/blazor-ui/grid/overview" target="_blank">Blazor data grid component</a> up and running. The article includes a video tutorial and a list of key features.

Updated on August 16, 2026
Comment thread
antonmironovv marked this conversation as resolved.
Outdated

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

<span class="cta-panel-big-module--container--c08a9 d-print-none "><span class="row align-items-center justify-content-center cta-panel-big-module--row--9b71a"><span class="col-auto"><img class="cta-panel-big-module--icon--a648c" src="/images/avatar-ninja.svg" alt="ninja-icon"></span><span class="col-12 col-sm"><span class="cta-panel-big-module--message--40a0f">Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:</span></span><span class="col-12 col-lg-auto"><a class="cta-panel-big-module--btnTrial--38b3e" href="https://www.telerik.com/blazor-ui/documentation/ai/overview?utm_source=ai-assistants-docs" target="_blank">Try AI Assistants</a></span></span></span>

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.

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.

> tip **Jumpstart Your Grid** <br/><br/> 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. <br/><br/>[Try the Agentic UI Generator](slug:agentic-ui-generator-getting-started)

## Creating Blazor Grid

1. Use the `TelerikGrid` tag.
1. Assign the Grid `Data` parameter to an `IEnumerable<T>` property, **or** use the [`OnRead` event](slug:common-features-data-binding-onread). We'll go with `Data` this time. The [Grid Data Binding article](slug:grid-data-binding) compares the two alternatives.
1. (optional) Enable some data operations like paging, sorting or filtering.
1. Assign the Grid `Data` parameter to an `IEnumerable<T>` property, **or** use the [`OnRead` event](slug:common-features-data-binding-onread). This example uses `Data`. The [Grid Data Binding article](slug:grid-data-binding) compares the two alternatives.
1. Optionally, enable data operations such as paging, sorting, or filtering.
1. Add [`GridColumn`](slug:components/grid/columns/bound) 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 `Title`s or [`DisplayFormat` for numeric and date values](slug:grid-columns-displayformat).

>caption Get started with the Blazor Grid
Expand All @@ -35,7 +37,7 @@ The Telerik Blazor grid is built on native Blazor from the ground up, by a compa

## Blazor Grid Video Tutorial

If you prefer video instructions, watch this short Blazor Grid video tutorial. It covers to following topics:
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
Expand All @@ -48,7 +50,7 @@ If you prefer video instructions, watch this short Blazor Grid video tutorial. I

## Data Binding

The are [two main ways to provide data to the Grid - via the `Data` parameter and via the `OnRead` event](slug:grid-data-binding). `Data` provides **simplicity**, while `OnRead` allows more **flexibility** in complex scenarios, and **performance** when there is a lot of data.
There are [two main ways to provide data to the Grid: through the `Data` parameter and through the `OnRead` event](slug:grid-data-binding). `Data` provides **simplicity**, while `OnRead` allows more **flexibility** in complex scenarios and can improve **performance** when the data source contains many records.


## Data Operations
Expand All @@ -60,14 +62,13 @@ The Blazor Grid supports all fundamental data operations out-of-the-box:
* [Filtering](slug:components/grid/filtering)
* [Grouping](slug:components/grid/features/grouping). The Grid can also [load the data for each group on demand](slug:grid-group-lod).
* [Aggregates](slug:grid-aggregates)
* Most data operations support [AI-driven natural language commands](slug:grid-ai-overview).


## 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.
The Grid offers several editing modes with different user experiences: in-cell, inline, and popup.

See [Grid CRUD Operations Overview](slug:grid-editing-overview) for more details.

Expand All @@ -86,7 +87,7 @@ The Grid columns offer a rich set of functionality to enable immense flexibility

* [Display Format](slug:grid-columns-displayformat) for numeric and date values
* [Resizing](slug:components/grid/columns/resize)
* [Reodering](slug:components/grid/columns/reorder)
* [Reordering](slug:components/grid/columns/reorder)
* [Column Menu](slug:grid-column-menu) to control data operations and column visibility
* [Frozen columns](slug:grid-columns-frozen), which do not scroll horizontally (also called locked columns)
* [Multi-column Headers](slug:grid-columns-multiple-column-headers) to group multiple column headers under a single parent header
Expand All @@ -101,7 +102,6 @@ The Grid supports custom content in various parts of the component such as data

## More Blazor Grid Features

* [Prompt-controlled data operations](slug:grid-ai-overview)—manage the Grid through AI-enabled natural language prompts. The supported features include filtering, sorting, grouping, highlighting, column operations, paging, selection, and exporting.
* [Selection](slug:grid-selection-overview)—select one or multiple rows through clicks or checkboxes or select one or multiple cells through clicks.
* [State](slug:grid-state)—get or set the Grid configuration programmatically.
* [Toolbar](slug:components/grid/features/toolbar)—define user actions in a toolbar above the header cells.
Expand All @@ -112,20 +112,14 @@ The Grid supports custom content in various parts of the component such as data
* [Highlighting](slug:grid-highlighting)—highlight rows or cells programmatically to draw attention to important data.


## Grid Parameters
## 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](slug:grid-ai-overview) describes the supported operations and the AI tools that you can add to the Grid toolbar.

The following table lists Grid parameters, which are not discussed elsewhere in the component documentation. Check the [Grid API Reference](slug:Telerik.Blazor.Components.TelerikGrid-1) for a full list of parameters, methods and events.

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
## Blazor Grid API

| Parameter | Type and Default&nbsp;Value | Description |
| --- | --- | --- |
| `AdaptiveMode` | `AdaptiveMode` enum <br /> (`None`) | Defines the adaptive mode of the Grid. When set to `Auto`, and the window width is below [`768px` or `RootComponentAdaptiveSettings.Medium`](slug:adaptive-rendering#rendering-specifics), the Grid will render ins inner popups (for example, FilterMenu, ContextMenu and more) as an `ActionSheet`. |
| `Class` | `string` | Additional CSS class for the `<div class="k-grid">` element. Use it to apply custom styles or [override the theme](slug:themes-override). For example, [change the Grid font size](slug:grid-kb-change-font-size). |
| `Height` | `string` | A height style in [any supported CSS unit](slug:common-features/dimensions). You can also [make the Grid height change automatically with the browser window](slug:grid-kb-adjust-height-with-browser). |
| `Navigable` | `bool` | Enables [keyboard navigation](slug:grid-keyboard-navigation). |
| `CustomKeyboardShortcuts` | `Dictionary` | [Overrides the built-in keyboard navigation shortcuts](slug:grid-keyboard-navigation#using-custom-keys). |
| `Width` | `string` | A width style in [any supported CSS unit](slug:common-features/dimensions). The Grid has no default width, but expands horizontally to fill its container. |
See the [Grid API Reference](slug:Telerik.Blazor.Components.TelerikGrid-1) for the full list of Grid parameters, methods, and events.


## Blazor Grid Reference and Methods
Expand All @@ -150,6 +144,24 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.
* [Learn about Grid columns](slug:components/grid/columns/bound)
* [Control the Grid with natural language prompts](slug:grid-ai-overview)

## Frequently Asked Questions
Comment thread
antonmironovv marked this conversation as resolved.
Outdated

### Does the Telerik Blazor Grid require a license?

Telerik UI for Blazor requires a commercial license or an active trial license. You can use the Grid during the [Telerik UI for Blazor free trial](https://www.telerik.com/blazor-ui/free-trial).

### How do I bind data to the Blazor Grid?

You can assign an `IEnumerable<T>` collection to the `Data` parameter for local data binding. For more control over data requests and operations, use the [`OnRead` event](slug:common-features-data-binding-onread). See [Grid data binding](slug:grid-data-binding) for a comparison of both approaches.

### Which editing modes does the Blazor Grid support?

The Grid supports [in-cell](slug:grid-editing-incell), [inline](slug:grid-editing-inline), and [popup](slug:grid-editing-popup) editing. Choose the mode that best matches the workflow in your application.

### Does the Blazor Grid support AI-powered data operations?

Yes. The Grid supports natural language commands for operations such as filtering, sorting, grouping, highlighting, selection, and exporting. See the [Grid Smart AI Features overview](slug:grid-ai-overview) for setup guidance and supported tools.

## See Also

* [Live Demos: Grid](https://demos.telerik.com/blazor-ui/grid/overview)
Expand Down