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