DataGrid (Blazor)

This article demonstrates how to use the DataGrid component. Check also the component guide and API reference .

DataGrid Properties


   IQueryable<TItem>

Contains the data items currently displayed in the DataGrid - with paging, sorting and filtering applied. Count Number of all records. PageSize Number of records per page. AllowPaging false Is paging allowed. AllowSorting false Is sorting allowed. AllowFiltering false Is filtering allowed. AllowGrouping false Is grouping allowed. AllowVirtualization false Is virtualization allowed. AllowColumnResize false Is column resize allowed. AllowColumnReorder false Is column reorder allowed. IsLoading false Should show loading indicator. Visible Is DataGrid visible. GroupPanelText string No records to display. Drag a column header here and drop it to group by that column EmptyText string No records to display. DataGrid text on no records. Columns RenderFragment DataGrid column definition as markup. ColumnsCollection


   IList<RadzenDataGridColumn<TItem>>

Collection of defined columns. Template


   RenderFragment<TItem>

DataGrid row details template. GroupHeaderTemplate RenderFragment DataGrid group header row template. FilterCaseSensitivity FilterCaseSensitivity FilterCaseSensitivity.Default Default or CaseInsensitive. FilterMode FilterMode FilterMode.Advanced Simple or Advanced. FilterDelay Number of milliseconds to wait before filter. CurrentPage Returns current page index. ApplyFilterText string Apply DataGrid date column filter apply button text. ClearFilterText string Clear DataGrid date column filter clear button text. EqualsText string Equals DataGrid date column filter Equals function text. NotEqualsText string Not equals DataGrid date column filter NotEqualsText function text. LessThanText string Less than DataGrid date column filter LessThanText function text. LessThanOrEqualsText string Less than or equals DataGrid date column filter LessThanOrEqualsText function text. GreaterThanText string Greater than DataGrid date column filter clear GreaterThanText text. GreaterThanOrEqualsText string Greater than or equals DataGrid date column filter GreaterThanOrEqualsText function text. EndsWithText string Ends with DataGrid date column filter EndsWithText function text. ContainsText string Contains DataGrid date column filter ContainsText function text. StartsWithText string Starts with DataGrid date column filter StartsWithText function text. EditMode DataGridEditMode DataGridEditMode.Multiple DataGrid edit mode Single or Multiple. ExpandMode DataGridEditMode DataGridExpandMode.Multiple DataGrid expand mode Single or Multiple. SelectionMode DataGridSelectionMode DataGridSelectionMode.Single DataGrid selection mode Single or Multiple. event Row select event of the DataGrid. Fired when row is selected. Row data as event arguments. RowDeselect event Row deselect event of the DataGrid. Fired when row is deselected. Row data as event arguments. RowDoubleClick event Row double click event of the DataGrid. Fired when row is double clicked. Row data as event arguments. RowClick event Row click event of the DataGrid. Fired when row is clicked. Row data as event arguments. RowExpand event Row expand event of the DataGrid. Fired when row is expanded. Row data as event arguments. RowCollapse event Row collapse event of the DataGrid. Fired when row is collapsed. Row data as event arguments. LoadData event Load data event of the DataGrid raised on page, sort and filter with info about the current page, page size, sorted columns and filter expressions RowRender event Row render event of the DataGrid. CellRender event Cell render event of the DataGrid. Render event Render event of the DataGrid. TItem item Sets specified row by data item in edit mode (EditTemplate column property will be rendered for the cell instead Template). RowEdit event will be raised with data item as argument. UpdateRow() TItem item Sets specified row by data item in view mode (Template column property will be rendered for the cell instead EditTemplate). RowUpdate event will be raised with data item as argument. CancelEditRow() TItem item Sets specified row by data item in view mode. IsRowInEditMode() Gets if specified row by data item is in Edit mode. ExpandRow() TItem item Expand/Collapse specified row by data item. RowExpand/RowCollapse event will be raised with data item as argument. string GridColumn format. int32, int64, float, double, byte, binary, base64, date, date-time, date-time-offset or password. Property string GridColumn property name. SortProperty string GridColumn sort property name. If not set Property will be used for sorting. FilterProperty string GridColumn filter property name. If not set Property will be used for filtering. Title string GridColumn title. Template string GridColumn template. HeaderTemplate string GridColumn header template. FooterTemplate string GridColumn footer template. FormatString string GridColumn format string. TextAlign string GridColumn format text align. Default Left. Width number GridColumn width in pixels. Sortable Is sorting allowed for this column. Filterable Is filtering allowed for this column. Frozen false Is column frozen. Resizable Is column resize allowed. Reorderable Is column reorder allowed. Groupable Is column grouping allowed.

Customizing the column appearance

By default the DataGrid component displays the value of the Property in a column. Use the Template property to customize the appearance. The whole data item is available as data in the expression.

Template examples:


    <strong>${data.FirstName}</strong>

- display the FirstName property in a


    <strong></strong>

element.


    <strong>@(data.FirstName)</strong>

- display the FirstName property in a


    <strong></strong>

element.


    Full Name: ${data.FirstName} ${data.LastName}

- display two data item properties in the column.


    Full Name: @(data.FirstName) @(data.LastName)

- display two data item properties in the column.

Important : The ${} syntax is specific to Radzen. If you are using the Radzen Blazor components outside of Radzen you have to use the @() syntax.

Blazor declaration

  <RadzenDataGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true"
              Data="@orders" TItem="Order" Value="@order">
      <Columns>
          <RadzenDataGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
              <FooterTemplate>
                  Total orders: <b>@orders.Count()</b>
              </FooterTemplate>
          </RadzenDataGridColumn>
          <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
          <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
              <Template Context="order">
                  <div>@order.Employee?.LastName</div>
                  <RadzenImage Path="@order.Employee?.Photo" Style="width:150px" />
              </Template>
          </RadzenDataGridColumn>
          <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" Format="date-time">
              <Template Context="order">
                  @String.Format("{0:d}", order.OrderDate)
              </Template>
              <FooterTemplate>
                  Last order date: <b>@String.Format("{0:d}", orders.OrderByDescending(o => o.OrderDate).Last().OrderDate)</b>
              </FooterTemplate>
          </RadzenDataGridColumn>
          <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
              <Template Context="order">
                  @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
              </Template>
              <FooterTemplate>
                  Total amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orders.Sum(o => o.Freight))</b>
              </FooterTemplate>
          </RadzenDataGridColumn>
          <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
      </Columns>
  </RadzenDataGrid>
Server-side operations
    DataGrid component can perform server-side sorting, paging and filtering when bound to IQueryable (default) or using LoadData event. When generating pages from database, Radzen will create automatically IQueryable service and will set Data property for the DataGrid component. Grouping will not be performed server-side - only on current page data if paging is enabled!
    For paging with LoadData event enable paging, add LoadData event handler, call your service with provided information in the event argument and set Data and Count properties to returned values.
Sorting and Filtering by lookup fields
DataGrid component can sort and filter by lookup fields by defining SortProperty and FilterProperty for desired column. When generating pages from database, Radzen will set automatically SortProperty and FilterProperty for all lookup columns based on data-source relations.
        Get started today
          Radzen Studio is free to use. You can also test the premium features for 15
          days.
        Download Now
      © 2016-2023 Radzen Ltd. All Rights Reserved.