Blazorise DataGrid: Getting Started

The DataGrid component is used for displaying tabular data. Features include sorting, searching, pagination, content-editing, and row selection.

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 10
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<DetailRowTriggerEventArgs<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
PageSizeChanged Occurs after the page size has changed. EventCallback<int>
PopupSize Defines the size of popup modal. ModalSize Default
PopupClosing Occurs before the popup dialog is closed. Func<ModalClosingEventArgs, Task>
NewItemCreator Function that, if set, is called to create new instance of an item. If left null a default constructor will be used. Func<TItem>
NewItemDefaultSetter Action will be called for setting default values of property, when create new entry Action<TItem>
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
ValidationsHandlerType Defines the default handler type that will be used by the validation, unless it is overriden by Validation.HandlerType property. Type 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
AggregateRowPosition Gets or sets the position of the aggregate row. DataGridAggregateRowPosition 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
FixedHeader Makes Datagrid have a fixed header and enabling a scrollbar in the Datagrid body. bool
FixedHeaderDataGridHeight Sets the Datagrid height when FixedHeader feature is enabled (defaults to 500px). string 500px
FixedHeaderDataGridMaxHeight Sets the Datagrid max height when FixedHeader feature is enabled (defaults to 500px). string 500px
DetailRowStartsVisible Controls whether DetailRow will start visible if DetailRowTemplate is set. DetailRowTrigger will be evaluated if set. bool true
PagerOptions Gets or sets Pager options. DataGridPagerOptions null
RowContextMenu Event called after the row has requested a context menu. EventCallback<DataGridRowMouseEventArgs<TItem>>
RowContextMenuPreventDefault Used to prevent the default action for an RowContextMenu event. bool false

DataGrid Templates

Name Description Type Default
DataGridColumns Template for holding the datagrid columns. RenderFragment
DataGridAggregates Template for holding the datagrid aggregate columns. RenderFragment
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
ButtonRowTemplate Gets or sets content of button row of pager. RenderFragment<ButtonRowContext<TItem>>
FirstPageButtonTemplate Gets or sets content of first button of pager. RenderFragment
LastPageButtonTemplate Gets or sets content of last button of pager. RenderFragment
PreviousPageButtonTemplate Gets or sets content of previous button of pager. RenderFragment
NextPageButtonTemplate Gets or sets content of next button of pager. RenderFragment
PageButtonTemplate Gets or sets content of page buttons of pager. RenderFragment<PageButtonContext>
ItemsPerPageTemplate Gets or sets content of items per page of grid. RenderFragment
TotalItemsShortTemplate Gets or sets content of total items grid for small devices. RenderFragment<PaginationContext<TItem>>
TotalItemsTemplate Gets or sets content of total items grid. RenderFragment<PaginationContext<TItem>>
DetailRowTemplate Gets or sets content of total items grid. RenderFragment<TItem>
PopupTitleTemplate Template for custom title of edit popup dialog RenderFragment<PopupTitleContext<TItem>>

VirtualizeOptions

Name Description Type Default
DataGridHeight Sets the DataGrid height when Virtualize feature is enabled (defaults to 500px). string 500px
DataGridMaxHeight Sets the DataGrid height when Virtualize feature is enabled (defaults to 500px). string 500px
OverscanCount Gets or sets a value that determines how many additional items will be rendered before and after the visible region. This help to reduce the frequency of rendering during scrolling. However, higher values mean that more elements will be present in the page. int
ScrollRowOnEdit If DataGrid goes into DataGridEditMode.Inline or DataGridEditMode.Form, scrolls the row to the top. bool true

DataGridPagerOptions

Name Description Type Default
ButtonSize Configures the pager buttons size. Size Size.Default
ButtonRowPosition Button Row Position. PagerElementPosition PagerElementPosition.Default
PaginationPosition Pagination Position. PagerElementPosition PagerElementPosition.Default
TotalItemsPosition Total Items Position. PagerElementPosition PagerElementPosition.Default

DataGridColumn

Name Description Type Default
Field TItem data field name. string
SortField The name of the field that will be used to sort data, overriding the 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 Default
TextAlignment Defines the alignment for display cell. TextAlignment Default
HeaderTextAlignment Defines the alignment for column header cell. TextAlignment Default
Editable Whether users can edit cell values under this column. bool false
Displayable Whether column can be displayed on a grid. bool true
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
PreventRowClick Will set @onclick:StopProgration to true, stopping the RowClick and consequent events from triggering. bool
ValidationItemCreator Function that, if set, is called to create a validation instance of an item that it's used as a separate instance for Datagrid's internal processing of validation. If left null, Datagrid will try to use it's own implementation to instantiate. Func<TItem>
ShowDefaultSortIcon Gets or sets whether default sort icon should display. bool false
SortOrder Gets or sets the order for sorting when Sorting is set to multiple. int
SortOrderChanged Raises an event every time that SortOrder is changed. EventCallback<int>

Methods

Name Description Type Default
New Sets the DataGrid into the New state mode.
Edit Sets the DataGrid into the Edit state mode for the specified item.
Delete Deletes the specified item from the Data source.
Save Save the internal state of the editing items.
Cancel Cancels the editing of DataGrid item.
Select Selects the specified item.
Sort Sorts the Data for the specified column. Note that Sortable must be enabled to be able to sort!
Paginate Triggers the DataGrid to change data source page.
ClearFilter Clears all filters from the grid.
FilterData Forces the internal DataGrid data to be filtered.
UpdateCellEditValue Updates the cell of the current editing item that matches the fieldName.
ReadCellEditValue Reads the cell value of the current editing item that matches the fieldName.
ToggleDetailRow Toggles DetailRow while evaluating the DetailRowTrigger if provided. Use forceDetailRow to ignore DetailRowTrigger and toggle the DetailRow.
ScrollToPixels If FixedHeader or Virtualize is enabled, it will scroll position to the provided pixels.
ScrollToRow If FixedHeader or Virtualize is enabled, it will scroll position to the provided row.