diff --git a/components/grid/overview.md b/components/grid/overview.md index c75b72e02..bfd73487d 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -12,21 +12,21 @@ components: ["grid"] # 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. +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. ninja-iconTired 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:Try AI Assistants 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**

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](slug:agentic-ui-generator-getting-started) ## Creating Blazor Grid 1. Use the `TelerikGrid` tag. -1. Assign the Grid `Data` parameter to an `IEnumerable` 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` 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 @@ -35,7 +35,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 @@ -48,7 +48,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 @@ -60,14 +60,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. @@ -86,7 +85,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 @@ -101,7 +100,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. @@ -112,20 +110,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 Value | Description | -| --- | --- | --- | -| `AdaptiveMode` | `AdaptiveMode` enum
(`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 `
` 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