Grid
This documentation provides a comprehensive reference for the
Grid component, guiding you through its configuration options.Screenshot #
Grid Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| AllowDetailView | bool | False | Gets or sets a value indicating whether the grid detail view is enabled. | 3.0.0 | |
| AllowFiltering | bool | False | Gets or sets the grid filtering. | 1.0.0 | |
| AllowPaging | bool | False | Gets or sets the grid paging. | 1.0.0 | |
| AllowRowClick | bool | False | Gets or sets the allow row click. | 1.9.5 | |
| AllowSelection | bool | False | Gets or sets the grid selection. | 1.8.0 | |
| AllowSorting | bool | False | Gets or sets the grid sorting. | 1.0.0 | |
| AllowSummary | bool | False | Gets or sets the grid summary. | 1.0.0 | |
| AutoHidePaging | bool | False | Automatically hides the paging controls when the grid item count is less than or equal to the PageSize and this property is set to true. | 1.10.5 | |
| ChildContent | RenderFragment? | null | Gets or sets the content to be rendered within the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Data | IEnumerable<TItem?>? | null | Gets or sets the grid data. | 1.4.3 | |
| DataProvider | GridDataProviderDelegate<TItem?>? | null | DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult, and null is not allowed. | 1.0.0 | |
| DisableAllRowsSelection | Func<IEnumerable<TItem?>, bool>? | null | Enable or disable the header checkbox selection. | 1.8.0 | |
| DisableRowSelection | Func<TItem?, bool>? | null | Enable or disable the row level checkbox selection. | 1.8.0 | |
| EmptyText | string | No records to display | Gets or sets the empty text. Shows text on no records. | 1.0.0 | |
| EnumFilterSelectText | string | Select | Gets or sets the enum filter select text. | 3.1.0 | |
| FiltersRowCssClass | string? | null | Gets or sets the filters row css class. | 1.9.2 | |
| FiltersTranslationProvider | GridFiltersTranslationDelegate? | null | Gets or sets the filters translation provider. | 1.10.0 | |
| FixedHeader | bool | False | Gets or sets the grid fixed header. | 1.10.3 | |
| GridContainerClass | string? | null | Gets or sets the grid container css class. | 3.0.0 | |
| GridContainerStyle | string? | null | Gets or sets the grid container css style. | 3.0.0 | |
| HeaderRowCssClass | string? | null | Gets or sets the header row css class but not the thead tag class. | 1.9.2 | |
| Height | float | 320 | Gets or sets the grid height. | 1.10.3 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| ItemsPerPageText | string | Items per page | Gets or sets the items per page text. | 1.9.5 | |
| Locale | string? | null | Gets or sets the locale. | 3.4.0 | |
| PageSize | int | 10 | Gets or sets the page size. | 1.0.0 | |
| PageSizeSelectorItems | int | System.Int32[] | Gets or sets the page size selector items. | 1.8.0 | |
| PageSizeSelectorVisible | bool | False | Gets or sets the page size selector visible. | 1.8.0 | |
| PaginationItemsTextFormat | string | {0} - {1} of {2} items | Gets or sets the pagination items text format. | 1.8.0 | |
| Responsive | bool | False | Gets or sets a value indicating whether the grid is responsive. | 1.0.0 | |
| RowClass | Func<TItem?, string>? | null | Gets or sets the row class. | 1.6.0 | |
| RowKeySelector | Func<TItem?, object>? | null | Gets or sets the function used to extract a unique key from a row item. | 1.0.0 | |
| SelectedItems | HashSet<TItem?>? | null | Gets or sets the selected items. | 1.8.0 | |
| SelectionMode | GridSelectionMode | Single | Gets or sets the grid selection mode. | 1.8.0 | |
| SettingsProvider | GridSettingsProviderDelegate? | null | Settings is for grid to render. The provider should always return an instance of GridSettings, and null is not allowed. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 | |
| THeadCssClass | string? | null | Gets or sets the thead css class. | 1.10.3 | |
| Unit | Unit | null | Gets or sets the units. | 1.10.3 |
Grid Methods #
| Name | Return type | Description | Added Version |
|---|---|---|---|
| GetFilters() | IEnumerable<FilterItem>? | Get filters. | 1.0.0 |
| RefreshDataAsync(CancellationToken cancellationToken) | Task | Refresh the grid data. | 1.0.0 |
| ResetPageNumber() | ValueTask | Reset the page number to 1 and refresh the grid. | 1.4.3 |
| SelectAllItemsAsync() | Task | Selects all items in the grid asynchronously. | 1.8.0 |
| UnSelectAllItemsAsync() | Task | Asynchronously clears the selection of all items in the grid. | 1.8.0 |
Grid Events #
| Name | Return Type | Description | Added Version |
|---|---|---|---|
| GridSettingsChanged | EventCallback<GridSettings> | This event is fired when the grid state is changed. | 1.0.0 |
| OnRowClick | EventCallback<GridRowEventArgs<TItem?>> | This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking. | 1.9.5 |
| OnRowDoubleClick | EventCallback<GridRowEventArgs<TItem?>> | This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking. | 1.9.5 |
| SelectedItemsChanged | EventCallback<HashSet<TItem?>> | This event is fired when the item selection changes. | 1.8.0 |
GridSettings Properties #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| Filters | IEnumerable<FilterItem>? | null | Gets or sets the filters. | 1.0.0 | |
| PageNumber | int | 0 | Gets or sets the page number. | 1.0.0 | |
| PageSize | int | 0 | Gets or sets the page size. | 1.0.0 |
GridColumns Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Specifies the content to be rendered inside the grid columns component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
GridColumn Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment<TItem?>? | null | Specifies the content to be rendered inside the grid column. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| ColumnClass | Func<TItem?, string>? | null | Gets or sets the column class. | 1.6.0 | |
| Filterable | bool | True | If true, filter is enabled. The filter is enabled or disabled based on the grid AllowFiltering parameter. | 1.0.0 | |
| FilterButtonColor | ButtonColor | Light | Gets or sets the filter button color. | 3.0.0 | |
| FilterButtonCSSClass | string? | null | Gets or sets the filter button CSS class. | 3.0.0 | |
| FilterOperator | FilterOperator | None | Gets or sets the filter operator. | 1.0.0 | |
| FilterTextboxWidth | int | 0 | Gets or sets the filter textbox width in pixels. | 1.0.0 | |
| FilterTextboxWidthUnit | Unit | Px | Gets or sets the filter textbox width units. | 1.0.0 | |
| FilterValue | string? | null | Gets or sets the filter value. | 1.0.0 | |
| Freeze | bool | False | Indicates whether the column is frozen. | 1.10.4 | |
| FreezeDirection | FreezeDirection | Left | Gets or sets the freeze direction of the column. | 1.10.4 | |
| FreezeLeftPosition | double | 0 | Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns. | 1.10.4 | |
| FreezeRightPosition | double | 0 | Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns. | 1.10.4 | |
| HeaderContent | RenderFragment? | null | Gets or sets the header content. | 1.7.3 | |
| HeaderText | string? | null | Gets or sets the table column header text. | 1.0.0 | |
| HeaderTextAlignment | Alignment | Start | Gets or sets the header text alignment. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| IsDefaultSortColumn | bool | False | Gets or sets the default sort column. | 1.0.0 | |
| IsVisible | bool | True | Gets or sets visibility of the Grid column. | 3.4.0 | |
| PropertyName | string? | null | Gets or sets the property name. This is required when AllowFiltering is true. | 1.0.0 | |
| Sortable | bool | True | Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the AllowSorting parameter on the grid. | 1.0.0 | |
| SortDirection | SortDirection | None | Gets or sets the default sort direction of a column. | 1.0.0 | |
| SortKeySelector | Expression<Func<TItem?, IComparable>>? | null | Expression used for sorting. | 1.0.0 | |
| SortString | string? | null | Gets or sets the column sort string. This value will be passed to the backend/API for sorting. And this property is ignored for the client-side sorting. | 1.0.0 | |
| StringComparison | StringComparison | OrdinalIgnoreCase | Gets or sets the StringComparison. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 | |
| SummaryType | GridSummaryColumnType | None | Gets or sets the summary column type. | 3.4.0 | |
| SummaryValueDisplayFormat | string? | null | Gets or sets the summary value display format. | 3.4.0 | |
| SummaryValuePrefix | string? | null | Gets or sets the summary value prefix. If set, it will be displayed before the summary value. Otherwise, based on the SummaryType, default prefix will be displayed. To remove the default prefix, set this property to an empty string. | 3.4.0 | |
| TextAlignment | Alignment | Start | Gets or sets the text alignment. | 1.0.0 | |
| TextNoWrap | bool | False | Gets or sets text nowrap. | 1.0.0 |
GridDetailView Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment<TItem?>? | null | Specifies the content to be rendered inside the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
GridTemplates Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Specifies the content to be rendered inside the grid templates component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
GridEmptyDataTemplate Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Specifies the content to be rendered inside the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
GridLoadingTemplate Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Specifies the content to be rendered inside the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
