This guide demonstrates how to use the DataGrid component.

Quick video

DataGrid Properties

Name Type Default Description
Name string ‘grid’ + index suffix Unique name of the DataGrid.
Data array null DataGrid data.
Title string null DataGrid title.
TitleColor string null DataGrid title color.
TitleBackground string null DataGrid title background color.
Count integer null DataGrid number of all recorcds.
PageSize integer 10 DataGrid number of recorcds per page.
AllowDelete boolean false Is records delete allowed.
AllowAdd boolean false Is adding of new records allowed.
AllowPaging boolean false Is paging allowed.
AllowSorting boolean false Is sorting allowed.
AllowMultiSorting boolean false Is multi sorting allowed.
AllowFiltering boolean false Is filtering allowed.
AllowScrolling boolean false Is scrolling allowed.
Visible boolean/expression true Is DataGrid visible.
EmptyText string No records to display. DataGrid text on no records.
Icon string null DataGrid icon.
Columns array of GridColumn empty DataGrid columns.
Template string null DataGrid row details template.

DataGrid Events

Name Type Default Description
RowSelect event null Row select event of the DataGrid. Fired when row is selected. Row data as event arguments.
Add event null Add event of the DataGrid. Fired when Add button is pressed. No event arguments.
Delete event null Delete event of the DataGrid. Fired when Delete button is pressed. Row data as event argument.
LoadData event null 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 in OData v4 format

GridColumn Properties

Name Type Default Description
Type string string GridColumn type. string, integer, number or boolean.
Format string null GridColumn format. int32, int64, float, double, byte, binary, base64, date, date-time, date-time-offset or password.
Property string null GridColumn property name.
SortProperty string null GridColumn sort property name. If not set Property will be used for sorting.
FilterProperty string null GridColumn filter property name. If not set Property will be used for filtering.
Title string null GridColumn title.
Template string null GridColumn template.
Width number null GridColumn width in pixels.
Sortable boolean true Is sorting allowed for this column.
Filterable boolean true Is filtering allowed for this column.

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.
  • Full Name: ${data.FirstName} ${data.LastName} - display two data item properties in the column.

Angular declaration

<rz-grid #grid0 [count]="getProductsCount" [data]="getProductsResult"
  <rz-grid-column format="int32" property="Id" title="Id" type="integer">
  <rz-grid-column property="ProductName" title="Product Name" type="string">
  <rz-grid-column property="ProductPicture" title="Product Picture" type="string">
    <ng-template let-data>
      <img width='50' height='50' src='{{data?.ProductPicture}}' />
  <rz-grid-column format="double" property="ProductPrice" title="Product Price" type="number">
    <ng-template let-data>
      {{data?.ProductPrice | currency:'USD':true}}

In-memory and server-side operations

DataGrid component can perform sorting, paging and filtering both in-memory and server-side.

  • For in-memory operations enable respective feature, add load event for the Page, call your service and set data property to returned value.

  • For server-side operations enable respective feature, add load event for the Page, call your service and set data and count properties to returned values, add loadData event handler, call your service again with provide information in the event argument and set again data and count properties to returned values. If you use New Data Dialog, Radzen will setup everything automatically.

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 OData V4, Microsoft SQL Server, MySQL or PostgreSQL, Radzen will set automatically SortProperty and FilterProperty for all lookup columns based on data-source relations.

Example request$filter=contains(Product/ProductName,%20%27Ch%27)&$top=10&$skip=0&$orderby=Product/ProductName%20desc&$expand=Order,Product&$count=true

Get Radzen

Sign-up to download the free 30-day Radzen trial.