DataGrid: Getting Started

To create a basic grid in Blazorise you need to set the Column that will define the grid structure and behavior.

DataGrid the main container
- DataGridColumns container for datagrid columns
  - DataGridColumn column template for text editor
  - DataGridNumericColumn column template for numeric values
  - DataGridDateColumn column template for datetime values
  - DataGridCheckColumn column template for boolean values
  - DataGridSelectColumn column template for selectable values
  - DataGridCommandColumn column template for editing commands like Edit, Save, Cancel, etc.
- DataGridAggregates container for datagrid aggregates
  - DataGridAggregate defines the column and aggregation function type

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.DataGrid

Imports

In your main Imports.razor add:

@using Blazorise.DataGrid

Usage

DataGrid

For DataGrid the required fields are TItem typeparam and Data attribute. Other attributes on the DataGrid are optional.

Columns

Next you must set the Columns that you want to see in the grid. When defining the columns the required fields are: TItem this is always the same model as on DataGrid. Field name of the field in the supplied model. Caption the column caption text.

Nested fields

Field attribute also supports nested fields. You can define a column with field name like "City.Country.Name" and it will work. Just keep in mind that when editing nested fields they must be initialized first or otherwise they will raise an exception.

Attributes

DataGrid

Name	Description	Type	Default
`Data`	Grid data-source.	`IEnumerable<TItem>`
`EditMode`	Specifies the grid editing modes.	`EditMode`	`Form`
`UseInternalEditing`	Specifies the behavior of DataGrid editing.	`bool`	`true`
`Editable`	Whether users can edit DataGrid rows.	`bool`	`false`
`Resizable`	Whether users can resize DataGrid columns.	`bool`	`false`
`ResizeMode`	Defines the resize mode of the data grid columns.	`TableResizeMode`	`Header`
`Sortable`	Whether end-users can sort data by the column’s values.	`bool`	`true`
`ShowCaptions`	Gets or sets whether user can see a column captions.	`bool`	`true`
`Filterable`	Whether users can filter rows by its cell values.	`bool`	`false`
`ShowPager`	Whether users can navigate DataGrid by using pagination controls.	`bool`	`false`
`CurrentPage`	Current page number.	`int`	`1`
`PageSize`	Maximum number of items for each page.	`int`	`5`
`Striped`	Adds stripes to the table.	`bool`	`false`
`Bordered`	Adds borders to all the cells.	`bool`	`false`
`Borderless`	Makes the table without any borders.	`bool`	`false`
`Hoverable`	Adds a hover effect when moussing over rows.	`bool`	`false`
`Narrow`	Makes the table more compact by cutting cell padding in half.	`bool`	`false`
`Responsive`	Makes table responsive by adding the horizontal scroll bar.	`bool`	`false`
`ReadData`	Handles the manual loading of large data sets.	`EventCallback`
`SelectedRow`	Currently selected row.	`TItem`
`SelectedRowChanged`	Occurs after the selected row has changed.	`EventCallback`
`RowSelectable`	Handles the selection of the DataGrid row. If not set it will default to always true.	`Func<TItem,bool>`
`RowHoverCursor`	Handles the selection of the cursor for a hovered row. If not set, Blazorise.Cursor.Pointer` will be used.	`Func<TItem,Blazorise.Cursor>`
`DetailRowTrigger`	A trigger function used to handle the visibility of detail row.	`Func<TItem,bool>`
`RowInserting`	Cancelable event called before the row is inserted.	`EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>`
`RowUpdating`	Cancelable event called before the row is updated.	`EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>`
`RowRemoving`	Cancelable event called before the row is removed.	`EventCallback<CancellableRowChange<TItem>>`
`RowInserted`	Event called after the row is inserted.	`EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>`
`RowUpdated`	Event called after the row is updated.	`EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>`
`RowRemoved`	Event called after the row is removed.	`EventCallback<TItem>`
`PageChanged`	Occurs after the selected page has changed.	`EventCallback`
`EmptyCellTemplate`	Define the display template for empty data cell.	`RenderFragment`
`EmptyTemplate`	Define the display template for empty data collection.	`RenderFragment`
`EmptyFilterTemplate`	Define the display template for empty filter data collection.	`RenderFragment`
`LoadingTemplate`	Define the display template for empty filter data collection.	`RenderFragment`
`PopupSize`	Defines the size of popup modal.	`ModalSize`	`Default`
`PopupClosing`	Occurs before the popup dialog is closed.	`Func<ModalClosingEventArgs, Task>`
`PopupTitleTemplate`	Template for custom title of edit popup dialog	`RenderFragment<PopupTitleContext<TItem>>`
`NewItemDefaultSetter`	Action will be called for setting default values of property, when create new entry	`Action<TItem>`
`PageButtonTemplate`	Define the format a pagination button	`RenderTemplate<PageButtonContext>`
`UseValidation`	If true, validation will be used when editing the fields	`bool`	`false`
`ShowValidationFeedback`	Hide or show feedback for validation	`bool`	`false`
`ShowValidationsSummary`	Hide or show validations summary	`bool`	`true`
`ValidationsSummaryLabel`	Label for validations summary.	`string`	`null`
`ValidationsSummaryErrors`	List of custom error messages for the validations summary.	`string[]`	`null`
`SortMode`	Defines whether the user can sort only by one column or by multiple.	`DataGridSortMode`	`Multiple`
`SelectionMode`	Defines whether the datagrid is set to single or multiple selection mode	`DataGridSelectionMode`	`Single`
`Localizers`	Custom localizer handlers to override default localization.	`DataGridLocalizers`
`CommandMode`	Defines whether the datagrid renders both commands and button row or just either one of them.	`DataGridCommandMode`	`Default`
`PagerPosition`	Defines the position of the pager.	`DataGridPagerPosition`	`Bottom`
`ShowPageSizes`	Defines whether users can adjust the page size of the datagrid.	`bool`	`false`
`Virtualize`	Gets or sets whether the datagrid will use the Virtualize functionality.	`bool`	`false`
`VirtualizeOptions`	Gets or sets Virtualize options when using the Virtualize functionality.	`VirtualizeOptions`	`null`
`SubmitFormOnEnter`	If true, the edit form will have the Save button as type="submit", and it will react to Enter keys being pressed.	`bool`	`true`
`HeaderThemeContrast`	Sets the Datagrid's table header ThemeContrast.	`ThemeContrast`
`DataGridMaxHeigh`	Sets the DataGrid height when `Virtualize` feature is enabled.	`string`	`500px`

DataGridColumn

Name	Description	Type	Default
`Field`	TItem data field name.	`string`
`Caption`	Column’s display caption. It will be displayed, if ColumnTemplate is not set.	`string`
`Filter`	Filter value for this column.	`FilterContext`
`SortDirection`	Column initial sort direction.	`SortDirection`	`None`
`TextAlignment`	Defines the alignment for display cell.	`TextAlignment`	`None`
`HeaderTextAlignment`	Defines the alignment for column header cell.	`TextAlignment`	`None`
`Editable`	Whether users can edit cell values under this column.	`bool`	`false`
`Displayable`	Whether column can be displayed on a grid.	`bool`	`false`
`DisplayOrder`	Where column will be displayed on a grid.	`int`	`0`
`Sortable`	Whether end-users can sort data by the column’s values.	`bool`	`true`
`Readonly`	Whether end-users are prevented from editing the column’s cell values.	`bool`	`false`
`ShowCaption`	Whether the column’s caption is displayed within the column header.	`bool`	`true`
`Filterable`	Whether users can filter rows by its cell values.	`bool`	`true`
`Width`	The width of the column.	`string`	`null`
`DisplayFormat`	Defines the format for display value.	`string`
`DisplayFormatProvider`	Defines the format provider info for display value.	`IFormatProvider`
`CellClass`	Custom classname handler for cell based on the current row item.	`Func<TItem, string>`
`CellStyle`	Custom style handler for cell based on the current row item.	`Func<TItem, string>`
`HeaderCellClass`	Custom classname for header cell.	`string`
`HeaderCellStyle`	Custom style for header cell.	`string`
`FilterCellClass`	Custom classname for filter cell.	`string`
`FilterCellStyle`	Custom style for filter cell.	`string`
`GroupCellClass`	Custom classname for group cell.	`string`
`GroupCellStyle`	Custom style for group cell.	`string`
`DisplayTemplate`	Template for custom cell display formating.	`RenderFragment<TItem>`
`EditTemplate`	Template for custom cell editing.	`RenderFragment<CellEditContext>`
`FilterTemplate`	Template for custom column filter rendering.	`RenderFragment<FilterContext>`
`PopupFieldColumnSize`	Defines the size of field for popup modal.	`IFluentColumn`	`IsHalf.OnDesktop`
`CaptionTemplate`	Template for custom caption. CaptionTemplate will block caption template.	`RenderFragment<DataGridColumn<TItem>>`
`SortDirectionTemplate`	Template for custom sort direction icon.	`RenderFragment<SortDirection>`
`Validator`	Validates the input value after trying to save.	`Action<ValidatorEventArgs>`
`ValidationPattern`	Forces validation to use regex pattern matching instead of default validator handler.	`string`
`CustomFilter`	Custom filter function used to override internal filtering.	`DataGridColumnCustomFilter`
`Display`	Specifies the display behavior of a cell.	`IFluentDisplay`
`HeaderDisplay`	Specifies the display behavior of a header cell.	`IFluentDisplay`