Skip to content
Shiny.NET
Blog
ShinySoft TechnologiesShinySoft Technologies
Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

DataGrid | Getting Started

Blazor

Section titled “Blazor”

DataGrid<TItem> is generic; declare columns as child components inside <Columns>. TItem cascades to the columns, so PropertyColumn only needs its Property expression.

<DataGrid TItem="Person" Items="people"
          SelectionMode="DataGridSelectionMode.Multiple"
          SortMode="DataGridSortMode.Multiple"
          FilterMode="DataGridFilterMode.Menu"
          Groupable="true"
          EditMode="DataGridEditMode.Form"
          Dense="true" Striped="true" Hover="true" Bordered="true"
          FixedHeader="true" Height="420px"
          FrozenColumns="1" FrozenEndColumns="1"
          ColumnResizeMode="DataGridColumnResizeMode.Column"
          MinColumnWidth="60" MaxColumnWidth="420"
          DragDropColumnReordering="true"
          ColumnReordered="OnColumnReordered"
          CommittedItemChanges="OnSaved">
    <Columns>
        <PropertyColumn Property="x => x.FirstName" Title="First"
                        Width="25%" MinWidth="80px" MaxWidth="260px" />
        <PropertyColumn Property="x => x.Age" Format="N0" />
        <PropertyColumn Property="x => x.Salary" Format="C0">
            <FooterTemplate>Total: @people.Sum(p => p.Salary).ToString("C0")</FooterTemplate>
        </PropertyColumn>
        <TemplateColumn Title="Status" Sortable="false" Filterable="false" Resizable="false">
            <CellTemplate>
                <Pill Text="@(context.Item.Active ? "Active" : "Inactive")"
                      Type="@(context.Item.Active ? PillType.Success : PillType.Caution)" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>
    <PagerContent>
        <DataGridPager TItem="Person" />
    </PagerContent>
</DataGrid>

Key grid parameters: Items, ServerData, SelectionMode, SelectedItem/SelectedItems, SortMode, FilterMode, QuickFilter, Groupable, Virtualize, EditMode, EditTrigger, ReadOnly, RowsPerPage, FixedHeader, Height, FrozenColumns/FrozenEndColumns, Dense/Striped/Bordered/Hover/Outlined, Loading, ColumnResizeMode, MinColumnWidth/MaxColumnWidth, ColumnResized, DragDropColumnReordering, ColumnReordered, and the edit events StartedEditingItem/CommittedItemChanges/CanceledEditingItem.

Paging is enabled by placing a <DataGridPager TItem="..." /> inside <PagerContent>.

MAUI

Section titled “MAUI”

Use shiny:DataGrid with shiny:DataGridColumn / shiny:DataGridTemplateColumn children. Items are object (XAML-friendly, no generics); bind a column with PropertyName, and template cells bind to the data item directly.

<shiny:DataGrid ItemsSource="{Binding People}"
                SelectionMode="Multiple"
                SortMode="Multiple"
                FilterMode="Menu"
                Groupable="True"
                PageSize="20"
                EditMode="Form"
                AllowColumnResize="True"
                AllowColumnReorder="True"
                HorizontalScroll="True"
                DefaultColumnWidth="140"
                MinColumnWidth="70" MaxColumnWidth="400"
                DragDropColumnReordering="True"
                FrozenColumns="1"
                Striped="True" Bordered="True">
    <shiny:DataGridColumn Title="First" PropertyName="FirstName" Width="*"
                          MinWidth="90" MaxWidth="260" />
    <shiny:DataGridColumn Title="Age" PropertyName="Age" Width="Auto" />
    <shiny:DataGridColumn Title="Department" PropertyName="Department" WidthPercent="30" />
    <shiny:DataGridColumn Title="Salary" PropertyName="Salary" StringFormat="{}{0:C0}" Width="*">
        <shiny:DataGridColumn.Aggregate>
            <shiny:DataGridAggregateDefinition Type="Sum" Format="C0" />
        </shiny:DataGridColumn.Aggregate>
    </shiny:DataGridColumn>
    <shiny:DataGridTemplateColumn Title="Status" Width="110" Editable="False"
                                  Resizable="False" Frozen="End">
        <shiny:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <shiny:PillView Text="{Binding StatusText}" Margin="12,8" />
            </DataTemplate>
        </shiny:DataGridTemplateColumn.CellTemplate>
    </shiny:DataGridTemplateColumn>
</shiny:DataGrid>

Key grid properties: ItemsSource, ServerData, SelectionMode, SelectedItem/SelectedItems, SortMode, FilterMode, Groupable, PageSize (0 = no paging), EditMode, EditTrigger, ReadOnly, AllowColumnResize, AllowColumnReorder, DragDropColumnReordering, ColumnReordered, HorizontalScroll, DefaultColumnWidth, MinColumnWidth/MaxColumnWidth, FrozenColumns/FrozenEndColumns, Dense/Striped/Bordered, ShowColumnHeaders, IsLoading, EmptyText, RowHeight, plus SelectionChanged and the edit events.

Behavior & platform nuances

Section titled “Behavior & platform nuances”
  • Sorting cycles ascending → descending → none on header tap; multi-sort shows order badges.
  • Filtering: Menu opens a per-column popup with type-aware operators; Row shows inline inputs under the header; Toolbar shows a single quick-search box matching any column.
  • Editing: on Blazor, Cell edits a single cell (commit on blur/Enter, cancel on Escape) and Form edits the whole row with Save/Cancel. On MAUI, both modes use inline-row editing (editors for the editable columns plus a Save/Cancel bar) — the natural touch model.
  • Reorder: both hosts have drag-and-drop on headers (DragDropColumnReordering, off by default); MAUI additionally offers ‹ › reorder arrows under the separate AllowColumnReorder. See Column ordering.
  • Virtualization: Blazor opt-in via Virtualize (best with FixedHeader + Height); MAUI is virtualized by default through CollectionView.

Next Steps

Section titled “Next Steps”