TelerikGrid<TItem>
A component that lets you display, edit, and manage tabular data with rich features. Supports data binding (local/OnRead), paging/virtual scrolling, sorting, filtering (row/menu), grouping (with load-on-demand), selection (row/cell), editing (none/inline/popup/incell), aggregates, detail templates, column virtualization, export (Excel/CSV/PDF), toolbar/pager templates, adaptive layout, and full state get/set APIs with events for state changes and user interactions.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Type Parameters:
TItem
The type of the model to which the grid is bound.
Syntax:
public class TelerikGrid<TItem> : TableGridBase<TItem, GridCommandEventArgs>, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseBaseComponentDataBoundComponent<TItem>GridBase<TItem>TableGridBase<TItem, GridCommandEventArgs>TelerikGrid<TItem>...
Implements:
Inherited Members
Constructors
public TelerikGrid()Methods
Sets the minimum possible widths to all Grid columns, so that there is no text wrapping.
Sets the minimum possible widths to multiple Grid columns, so that there is no text wrapping.
public Task AutoFitColumnsAsync(IEnumerable<string> ids)The Id values of the columns to autofit.
Returns:protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
public override void Dispose()Overrides:
Exports the Grid to a MemoryStream that can be saved as a CSV file.
Exports the Grid to a MemoryStream that can be saved as a CSV file.
public Task<MemoryStream> ExportToCsvAsync(GridCsvExportOptions options)Exports the Grid to a MemoryStream that can be saved as an Excel file.
Exports the Grid to a MemoryStream that can be saved as an Excel file.
public Task<MemoryStream> ExportToExcelAsync(GridExcelExportOptions options)Exports the Grid to a MemoryStream that can be saved as a CSV file.
Get an AI request.
Get an AI request.
protected override TItem GetItemFromDropIndex(int index)TItem
Overrides:
GetState()
GridState<TItem>
Exports the Grid to a file and sends it to the browser for download.
Exports the Grid to a file and sends it to the browser for download.
public ValueTask SaveAsCsvFileAsync(GridCsvExportOptions options)Exports the grid to a file and sends it to the browser for download.
Exports the grid to a file and sends it to the browser for download.
public ValueTask SaveAsExcelFileAsync(GridExcelExportOptions options)Exports the Grid to a file and sends it to the browser for download.
public override Task SetParametersAsync(ParameterView parameters)Overrides:
Properties
Custom keyboard shortcut mappings that override or extend default Grid keyboard behavior for specific scopes. The dictionary is organized by GridKeyboardScope (e.g., Common, DataCell, HeaderCell, EditCell), with each scope containing its own shortcut-to-command mappings. Keys are keyboard shortcut strings (e.g., "Ctrl+S", "Enter") and values are GridKeyboardCommand enum values. Use Common to define shortcuts that work across all scopes (e.g., navigation). Scope-specific shortcuts take priority over Common shortcuts. Multiple shortcuts can map to the same command by adding multiple entries. To apply changes at runtime, reassign the parameter with a new dictionary instance.
[Parameter]
public Dictionary<GridKeyboardScope, Dictionary<string, GridKeyboardCommand?>> CustomKeyboardShortcuts { get; set; }Defines the layout mode of the Grid. Use Stacked to enable the stacked layout with expandable rows showing additional data in a card-like format.
[Parameter]
public GridDataLayoutMode DataLayoutMode { get; set; }DetailTemplate
RenderFragment<TItem>
Template displayed in expandable rows below the main row data. Use this to create master-detail views with nested content for each row. Not compatible with virtual scrolling (Virtual).
[Parameter]
public RenderFragment<TItem> DetailTemplate { get; set; }Enables data editing and determines the editing interface. Use None to disable editing entirely, Inline to edit entire rows directly in the grid, Popup to open a modal dialog with edit form, or Incell to edit individual cells separately (not compatible with cell selection). The default mode is None.
[Parameter]
public GridEditMode EditMode { get; set; }Enables WebMCP tool registration for this Grid. When true, Grid operations are exposed as tools discoverable by AI models through the browser.
Configure tool names and overrides via GridWebMcpSettings inside GridSettings.
[Parameter]
public bool EnableWebMcpTools { get; set; }Enables data filtering and determines the filter interface. Use None to disable filtering entirely, FilterRow to show inline filter controls below column headers, or FilterMenu to show filter options in dropdown menus accessed from column headers.
[Parameter]
public GridFilterMode FilterMode { get; set; }Contains Grid aggregates to calculate summary values for columns like sum, average, count, min, and max. Use this to display totals at the bottom of grouped data. Children: GridAggregate.
[Parameter]
public RenderFragment GridAggregates { get; set; }Contains the column definitions that specify how data is displayed including headers, width, sorting, filtering, and editing behavior. Children: GridColumn, GridCheckboxColumn, GridCommandColumn.
[Parameter]
public RenderFragment GridColumns { get; set; }Contains export configuration for Excel, CSV, and PDF export functionality. Use this to enable data export from the Grid. Children: GridExcelExport, GridCsvExport, GridPdfExport.
[Parameter]
public RenderFragment GridExport { get; set; }Custom pager template that replaces the default pagination controls at the bottom of the Grid. Use this to create custom pagination UI.
[Parameter]
public RenderFragment GridPagerTemplate { get; set; }Contains additional Grid configuration options like pager, popup edit, row dragging, selection, and validation settings. Children: GridPagerSettings, GridPopupEditSettings, GridRowDraggableSettings, GridSelectionSettings, GridValidationSettings.
[Parameter]
public RenderFragment GridSettings { get; set; }Contains predefined toolbar tools like Add, Export, Search, and Select All buttons that appear above the Grid columns. Cannot be used simultaneously with GridToolBarTemplate - choose either the strongly-typed toolbar or the custom template. Children: GridCommandButton, GridSearchBox, GridToolBarAddTool, GridToolBarCsvExportTool, GridToolBarExcelExportTool, GridToolBarSearchBoxTool, GridToolBarSelectAllTool, GridToolBarSpacerTool.
[Parameter]
public RenderFragment GridToolBar { get; set; }Custom toolbar template that appears above the Grid columns. Use this to create custom toolbar content instead of predefined toolbar tools. Cannot be used simultaneously with GridToolBar - choose either the template or the strongly-typed toolbar.
[Parameter]
public RenderFragment GridToolBarTemplate { get; set; }Enables data grouping by dragging column headers to a group panel and allows users to expand/collapse groups to organize data hierarchically. When using virtual scrolling (Virtual), grouping requires LoadGroupsOnDemand to be enabled. Programmatic grouping via SetStateAsync(GridState<TItem>) is always possible.
[Parameter]
public bool Groupable { get; set; }Collection of specific cells to visually highlight in the Grid. Use this to emphasize individual cells with different styling.
[Parameter]
public List<GridHighlightedCellDescriptor> HighlightedCells { get; set; }HighlightedItems
List<TItem>
Collection of data items to visually highlight in the Grid. Use this to emphasize specific rows with different styling.
[Parameter]
public List<TItem> HighlightedItems { get; set; }Controls where new rows appear when adding data. Set to Top to insert at the beginning or Bottom to insert at the end of the Grid. Default value is Top.
[Parameter]
public GridNewRowPosition NewRowPosition { get; set; }Fires when the Grid needs data from a remote source. Handle this event to implement custom data operations like paging, sorting, filtering, and grouping. sorting, filtering, grouping and paging. Once OnRead is attached, you must implement all such data source operations here. The Component will no longer perform them for you.
[Parameter]
public EventCallback<GridReadEventArgs> OnRead { get; set; }Fires when user clicks on a Grid row or presses Enter while a row has focus. Use this to handle row selection or navigation.
[Parameter]
public EventCallback<GridRowClickEventArgs> OnRowClick { get; set; }Fires when user collapses a detail row to hide nested content. Use this to clean up resources or track row collapse state.
[Parameter]
public EventCallback<GridRowCollapseEventArgs> OnRowCollapse { get; set; }Fires when user right-clicks on a Grid row or uses context menu key. Use this to display custom context menus for row actions.
[Parameter]
public EventCallback<GridRowClickEventArgs> OnRowContextMenu { get; set; }Fires when user double-clicks on a Grid row. Use this to trigger actions like opening edit forms or navigation.
[Parameter]
public EventCallback<GridRowClickEventArgs> OnRowDoubleClick { get; set; }Fires when user completes dragging a Grid row to a new position. Enable RowDraggable to allow row reordering by drag and drop.
[Parameter]
public EventCallback<GridRowDropEventArgs<TItem>> OnRowDrop { get; set; }Fires when user expands a detail row to show nested content. Use this to load detail data or track row expansion state.
[Parameter]
public EventCallback<GridRowExpandEventArgs> OnRowExpand { get; set; }Fires every time a Grid row is rendered. Use this to conditionally apply custom CSS classes or styling to rows based on data.
[Parameter]
public Action<GridRowRenderEventArgs> OnRowRender { get; set; }Fires whenever Grid state changes due to user actions like sorting, filtering, paging, or grouping. Use this to save state for persistence.
[Parameter]
public EventCallback<GridStateEventArgs<TItem>> OnStateChanged { get; set; }Fires during Grid initialization when state can be loaded from external storage. Use this to restore saved Grid settings like sorting and filtering. Useful when you'd like to persist changed on page reloads.
[Parameter]
public EventCallback<GridStateEventArgs<TItem>> OnStateInit { get; set; }Controls how the Grid handles large datasets. Use Scrollable for standard scrolling that renders all data and requires setting the Grid's Height, or Virtual for performance optimization with large datasets that renders only visible items during scrolling. When using Virtual, you must also set RowHeight and Height. Virtual scrolling is not compatible with Groupable (unless LoadGroupsOnDemand is true), Pageable, or DetailTemplate.
[Parameter]
public GridScrollMode ScrollMode { get; set; }Collection of currently selected cells when cell selection is enabled. Supports two-way binding for programmatic selection management.
[Parameter]
public IEnumerable<GridSelectedCellDescriptor> SelectedCells { get; set; }Fires when cell selection changes. Use this event to respond to user selecting or deselecting cells in the Grid.
[Parameter]
public EventCallback<IEnumerable<GridSelectedCellDescriptor>> SelectedCellsChanged { get; set; }