DataGrid

For more examples, visit the Storybook.

Example

<StudsDataGrid @ref="grid"
              Data="@employees"
              AllowRowSelectOnRowClick="true"
              AllowSorting="true"
              AllowPaging="true"
              PageSize="4"
              ColumnWidth="200px"
              SelectionMode="DataGridSelectionMode.Multiple"
              @bind-Value="@selectedEmployees">
    <Columns>
        <StudsDataGridColumn Width="60px" Sortable="false" Filterable="false">
            <HeaderTemplate>
                <StudsCheckBox TabIndex="-1" TriState="false" TValue="bool?" Value="@(selectedEmployees == null || selectedEmployees?.Any() != true ? false : !employees.All(i => selectedEmployees.Contains(i)) ? null : employees.Any(i => selectedEmployees.Contains(i)))" Change="@(args => selectedEmployees = args == true ? employees.ToList() : null)" />
            </HeaderTemplate>
            <Template Context="data">
                <StudsCheckBox TabIndex="-1" TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
            </Template>
        </StudsDataGridColumn>
        <StudsDataGridColumn Property="@nameof(Employee.Photo)" Title="Employee" Sortable="false" Filterable="false">
            <Template Context="data">
                @data.FirstName @data.LastName
            </Template>
        </StudsDataGridColumn>
        <StudsDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
        <StudsDataGridColumn Property="@nameof(Employee.EmployeeID)" Title="Employee ID" />
        <StudsDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
        <StudsDataGridColumn Property="@nameof(Employee.City)" Title="City" />
        <StudsDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
    </Columns>
</StudsDataGrid>

`<StudsDataGrid>` Parameters

Data

IEnumerable<TItem>

Gets or sets the data source.

AllowSorting

bool

default:"false"

If true, columns can be sorted by clicking on the column header.

AllowPaging

bool

default:"false"

If true, the grid will display pagination controls.

PageSize

int

default:"10"

The number of rows to display per page when paging is enabled.

PageNumbersCount

int

default:"5"

Gets or sets the page numbers count.

Count

int

Gets or sets the total count of items.

ShowEmptyMessage

bool

default:"true"

If true, shows the empty message when there are no records.

ShowHeader

bool

default:"true"

If true, shows the grid headers.

ColumnWidth

string

Default width for all columns.

Caption

string

Caption text for the grid.

EmptyText

string

default:"No records to display."

Text to display when there are no records.

IsLoading

bool

default:"false"

If true, displays a loading indicator.

SelectionMode

DataGridSelectionMode

default:"DataGridSelectionMode.Single"

Specifies the selection mode behavior (Single or Multiple).

AllowRowSelectOnRowClick

bool

default:"true"

If true, clicking a row will select it.

EditMode

DataGridEditMode

default:"DataGridEditMode.Multiple"

Specifies the inline edit mode behavior (Single or Multiple).

GotoFirstPageOnSort

bool

default:"false"

If true, the grid will go to the first page when sorting is changed.

KeyProperty

string

Gets or sets the key property.

Value

IList<TItem>

Gets or sets the selected rows.

ValueChanged

EventCallback<IList<TItem>>

Callback fired when the selected rows change.

LoadChildData

EventCallback<DataGridLoadChildDataEventArgs<TItem>>

Callback used to load child data for hierarchical grids.

Sort

EventCallback<DataGridColumnSortEventArgs<TItem>>

Callback fired when a column is sorted.

Group

EventCallback<DataGridColumnGroupEventArgs<TItem>>

Callback fired when a column is grouped.

PickedColumnsChanged

EventCallback<DataGridPickedColumnsChangedEventArgs<TItem>>

Callback fired when the visible columns change.

RowSelect

EventCallback<TItem>

Callback fired when a row is selected.

RowDeselect

EventCallback<TItem>

Callback fired when a row is deselected.

RowClick

EventCallback<DataGridRowMouseEventArgs<TItem>>

Callback fired when a row is clicked.

RowDoubleClick

EventCallback<DataGridRowMouseEventArgs<TItem>>

Callback fired when a row is double-clicked.

CellClick

EventCallback<DataGridCellMouseEventArgs<TItem>>

Callback fired when a cell is clicked.

CellDoubleClick

EventCallback<DataGridCellMouseEventArgs<TItem>>

Callback fired when a cell is double-clicked.

Callback fired when a cell context menu is triggered.

KeyDown

EventCallback<KeyboardEventArgs>

Callback fired when a key is pressed in the grid.

RowEdit

EventCallback<TItem>

Callback fired when a row is edited.

RowUpdate

EventCallback<TItem>

Callback fired when a row is updated.

RowCreate

EventCallback<TItem>

Callback fired when a row is created.

RowRender

Action<RowRenderEventArgs<TItem>>

Action to customize row rendering attributes.

CellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize cell rendering attributes.

HeaderCellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize header cell rendering attributes.

FooterCellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize footer cell rendering attributes.

RenderAsync

Func<DataGridRenderEventArgs<TItem>, Task>

Async callback for render customization.

Render

Action<DataGridRenderEventArgs<TItem>>

Action for render customization.

LoadSettings

Action<DataGridLoadSettingsEventArgs>

Action for loading settings.

PageSizeChanged

EventCallback<int>

Callback fired when the page size changes.

LoadData

EventCallback<LoadDataArgs>

Callback for custom data loading.

Settings

DataGridSettings

Gets or sets DataGrid settings.

SettingsChanged

EventCallback<DataGridSettings>

Callback fired when settings change.

Columns

RenderFragment

Gets or sets the columns template.

HeaderTemplate

RenderFragment

Custom header template.

FooterTemplate

RenderFragment

Custom footer template.

EmptyTemplate

RenderFragment

Template to display when there are no records.

LoadingTemplate

RenderFragment

Template to display while loading.

EditTemplate

RenderFragment<TItem>

Template for row edit mode.

Template

RenderFragment<TItem>

Template for row display.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`<StudsDataGridColumn>` Parameters

Columns

RenderFragment

Child columns for grouping or composite columns.

AllowCheckBoxListVirtualization

bool

default:"true"

Whether to allow checkbox list virtualization.

UniqueID

string

Unique identifier for the column.

OrderIndex

int?

Order index for column positioning.

SortOrder

SortOrder?

Sort order for the column.

Visible

bool

default:"true"

Gets or sets a value indicating whether this column is visible.

Gets or sets the header tooltip.

Title

string

Gets or sets the column title.

Property

string

Gets or sets the property name.

SortProperty

string

Gets or sets the sort property name (if different from Property).

Width

string

Gets or sets the column width.

MinWidth

string

Gets or sets the minimum column width.

FormatString

string

Format string to apply to the column values.

CssClass

string

CSS class to apply to data cells in this column.

CalculatedCssClass

Func<StudsDataGridColumn<TItem>, TItem, string>

Function that returns a CSS class based on the item and column.

HeaderCssClass

string

CSS class to apply to the header cell of this column.

FooterCssClass

string

CSS class to apply to the footer cell of this column.

Sortable

bool

default:"true"

If false, this column cannot be sorted.

TextAlign

default:"TextAlign.Left"

The text alignment in this column.

Template

RenderFragment<TItem>

Custom cell template.

EditTemplate

RenderFragment<TItem>

Custom edit template.

IsInEditMode

Func<string, TItem, bool>

default:"DefaultIsInEditMode"

Function that determines if this column is in edit mode.

HeaderTemplate

RenderFragment

Custom header template.

FooterTemplate

RenderFragment

Custom footer template.

Type

Gets or sets the data type.

FormatProvider

IFormatProvider

Gets or sets the IFormatProvider used for FormatString.

FilterOperator

Gets or sets the filter operator.

For more examples, visit the Storybook.

Example

<StudsDataGrid @ref="grid"
              Data="@employees"
              AllowRowSelectOnRowClick="true"
              AllowSorting="true"
              AllowPaging="true"
              PageSize="4"
              ColumnWidth="200px"
              SelectionMode="DataGridSelectionMode.Multiple"
              @bind-Value="@selectedEmployees">
    <Columns>
        <StudsDataGridColumn Width="60px" Sortable="false" Filterable="false">
            <HeaderTemplate>
                <StudsCheckBox TabIndex="-1" TriState="false" TValue="bool?" Value="@(selectedEmployees == null || selectedEmployees?.Any() != true ? false : !employees.All(i => selectedEmployees.Contains(i)) ? null : employees.Any(i => selectedEmployees.Contains(i)))" Change="@(args => selectedEmployees = args == true ? employees.ToList() : null)" />
            </HeaderTemplate>
            <Template Context="data">
                <StudsCheckBox TabIndex="-1" TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
            </Template>
        </StudsDataGridColumn>
        <StudsDataGridColumn Property="@nameof(Employee.Photo)" Title="Employee" Sortable="false" Filterable="false">
            <Template Context="data">
                @data.FirstName @data.LastName
            </Template>
        </StudsDataGridColumn>
        <StudsDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
        <StudsDataGridColumn Property="@nameof(Employee.EmployeeID)" Title="Employee ID" />
        <StudsDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
        <StudsDataGridColumn Property="@nameof(Employee.City)" Title="City" />
        <StudsDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
    </Columns>
</StudsDataGrid>

`<StudsDataGrid>` Parameters

Data

IEnumerable<TItem>

Gets or sets the data source.

AllowSorting

bool

default:"false"

If true, columns can be sorted by clicking on the column header.

AllowPaging

bool

default:"false"

If true, the grid will display pagination controls.

PageSize

int

default:"10"

The number of rows to display per page when paging is enabled.

PageNumbersCount

int

default:"5"

Gets or sets the page numbers count.

Count

int

Gets or sets the total count of items.

ShowEmptyMessage

bool

default:"true"

If true, shows the empty message when there are no records.

ShowHeader

bool

default:"true"

If true, shows the grid headers.

ColumnWidth

string

Default width for all columns.

Caption

string

Caption text for the grid.

EmptyText

string

default:"No records to display."

Text to display when there are no records.

IsLoading

bool

default:"false"

If true, displays a loading indicator.

SelectionMode

DataGridSelectionMode

default:"DataGridSelectionMode.Single"

Specifies the selection mode behavior (Single or Multiple).

AllowRowSelectOnRowClick

bool

default:"true"

If true, clicking a row will select it.

EditMode

DataGridEditMode

default:"DataGridEditMode.Multiple"

Specifies the inline edit mode behavior (Single or Multiple).

GotoFirstPageOnSort

bool

default:"false"

If true, the grid will go to the first page when sorting is changed.

KeyProperty

string

Gets or sets the key property.

Value

IList<TItem>

Gets or sets the selected rows.

ValueChanged

EventCallback<IList<TItem>>

Callback fired when the selected rows change.

LoadChildData

EventCallback<DataGridLoadChildDataEventArgs<TItem>>

Callback used to load child data for hierarchical grids.

Sort

EventCallback<DataGridColumnSortEventArgs<TItem>>

Callback fired when a column is sorted.

Group

EventCallback<DataGridColumnGroupEventArgs<TItem>>

Callback fired when a column is grouped.

PickedColumnsChanged

EventCallback<DataGridPickedColumnsChangedEventArgs<TItem>>

Callback fired when the visible columns change.

RowSelect

EventCallback<TItem>

Callback fired when a row is selected.

RowDeselect

EventCallback<TItem>

Callback fired when a row is deselected.

RowClick

EventCallback<DataGridRowMouseEventArgs<TItem>>

Callback fired when a row is clicked.

RowDoubleClick

EventCallback<DataGridRowMouseEventArgs<TItem>>

Callback fired when a row is double-clicked.

CellClick

EventCallback<DataGridCellMouseEventArgs<TItem>>

Callback fired when a cell is clicked.

CellDoubleClick

EventCallback<DataGridCellMouseEventArgs<TItem>>

Callback fired when a cell is double-clicked.

Callback fired when a cell context menu is triggered.

KeyDown

EventCallback<KeyboardEventArgs>

Callback fired when a key is pressed in the grid.

RowEdit

EventCallback<TItem>

Callback fired when a row is edited.

RowUpdate

EventCallback<TItem>

Callback fired when a row is updated.

RowCreate

EventCallback<TItem>

Callback fired when a row is created.

RowRender

Action<RowRenderEventArgs<TItem>>

Action to customize row rendering attributes.

CellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize cell rendering attributes.

HeaderCellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize header cell rendering attributes.

FooterCellRender

Action<DataGridCellRenderEventArgs<TItem>>

Action to customize footer cell rendering attributes.

RenderAsync

Func<DataGridRenderEventArgs<TItem>, Task>

Async callback for render customization.

Render

Action<DataGridRenderEventArgs<TItem>>

Action for render customization.

LoadSettings

Action<DataGridLoadSettingsEventArgs>

Action for loading settings.

PageSizeChanged

EventCallback<int>

Callback fired when the page size changes.

LoadData

EventCallback<LoadDataArgs>

Callback for custom data loading.

Settings

DataGridSettings

Gets or sets DataGrid settings.

SettingsChanged

EventCallback<DataGridSettings>

Callback fired when settings change.

Columns

RenderFragment

Gets or sets the columns template.

HeaderTemplate

RenderFragment

Custom header template.

FooterTemplate

RenderFragment

Custom footer template.

EmptyTemplate

RenderFragment

Template to display when there are no records.

LoadingTemplate

RenderFragment

Template to display while loading.

EditTemplate

RenderFragment<TItem>

Template for row edit mode.

Template

RenderFragment<TItem>

Template for row display.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`<StudsDataGridColumn>` Parameters

Columns

RenderFragment

Child columns for grouping or composite columns.

AllowCheckBoxListVirtualization

bool

default:"true"

Whether to allow checkbox list virtualization.

UniqueID

string

Unique identifier for the column.

OrderIndex

int?

Order index for column positioning.

SortOrder

SortOrder?

Sort order for the column.

Visible

bool

default:"true"

Gets or sets a value indicating whether this column is visible.

Gets or sets the header tooltip.

Title

string

Gets or sets the column title.

Property

string

Gets or sets the property name.

SortProperty

string

Gets or sets the sort property name (if different from Property).

Width

string

Gets or sets the column width.

MinWidth

string

Gets or sets the minimum column width.

FormatString

string

Format string to apply to the column values.

CssClass

string

CSS class to apply to data cells in this column.

CalculatedCssClass

Func<StudsDataGridColumn<TItem>, TItem, string>

Function that returns a CSS class based on the item and column.

HeaderCssClass

string

CSS class to apply to the header cell of this column.

FooterCssClass

string

CSS class to apply to the footer cell of this column.

Sortable

bool

default:"true"

If false, this column cannot be sorted.

TextAlign

default:"TextAlign.Left"

The text alignment in this column.

Template

RenderFragment<TItem>

Custom cell template.

EditTemplate

RenderFragment<TItem>

Custom edit template.

IsInEditMode

Func<string, TItem, bool>

default:"DefaultIsInEditMode"

Function that determines if this column is in edit mode.

HeaderTemplate

RenderFragment

Custom header template.

FooterTemplate

RenderFragment

Custom footer template.

Type

Gets or sets the data type.

FormatProvider

IFormatProvider

Gets or sets the IFormatProvider used for FormatString.

FilterOperator

Gets or sets the filter operator.

Getting Started

Foundations

Components

Integration

Content

`<StudsDataGrid>` Parameters

`<StudsDataGridColumn>` Parameters

`<StudsDataGrid>` Parameters

`<StudsDataGridColumn>` Parameters

Getting Started

Foundations

Components

Integration

Content

​<StudsDataGrid> Parameters

​<StudsDataGridColumn> Parameters

​<StudsDataGrid> Parameters

​<StudsDataGridColumn> Parameters

`<StudsDataGrid>` Parameters

`<StudsDataGridColumn>` Parameters

`<StudsDataGrid>` Parameters

`<StudsDataGridColumn>` Parameters