Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

DataGrid (Angular)

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.
Count	integer	null	DataGrid number of all records.
PageSize	integer	10	DataGrid number of records 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.
Columns	array of GridColumn	empty	DataGrid columns.
Template	string	null	DataGrid row details template.
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.

DataGrid Events

Name	Type	Description
RowSelect	event	Row select event of the DataGrid. Fired when row is selected. 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.
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.
Add	event	Add event of the DataGrid. Fired when `Add` button is pressed. No event arguments.
Create	event	Fired when the user saves a new record during inline editing. The event argument is the row data.
Update	event	Fired when the user saves an existing record during inline editing. The event argument is the row data.
Delete	event	Delete event of the DataGrid. Fired when `Delete` button is pressed. Row data as event argument.
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 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.
FooterTemplate	string	null	GridColumn footer 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:

${data.FirstName} - display the FirstName property in a  element.
Full Name: ${data.FirstName} ${data.LastName} - display two data item properties in the column.

Footer template

TOTAL: ${totalUnitPrice | currency} - display the total UnitPrice property in a  element.

You can apply calculations on current page data or all items using the following expression: ${result.value.map(p=>p.UnitPrice).reduce((a, b) => a + b)}. If you want the calculation to be applied on all items you can request them separately using for example $select parameter:

Angular declaration

  <rz-grid #grid0 addText="Add" [allowFiltering]="true" [allowPaging]="true" [allowSorting]="true" [count]="getProductsCount" [data]="getProductsResult" emptyText="No records to display." [pageSize]="10" (loadData)="grid0LoadData($event)">
    <rz-grid-column property="ProductID" title="Product ID" type="integer">
    </rz-grid-column>
    <rz-grid-column property="ProductName" title="Product Name" type="string">
    </rz-grid-column>
    <rz-grid-column property="QuantityPerUnit" title="Quantity Per Unit" type="string">
    </rz-grid-column>
    <rz-grid-column format="decimal" property="UnitPrice" title="Unit Price" type="number">
      <ng-template let-data gridColumnTemplate>
      {{data?.UnitPrice | currency}}
      </ng-template>
      <ng-template gridColumnFooterTemplate>
      <b>TOTAL: {{totalUnitPrice | currency}}</b>
      </ng-template>
    </rz-grid-column>
    <rz-grid-column format="int16" property="UnitsInStock" title="Units In Stock" type="integer">
      <ng-template let-data gridColumnTemplate>
      {{data?.UnitsInStock}}
      </ng-template>
      <ng-template gridColumnFooterTemplate>
      <b>TOTAL: {{totalUnitsInStock}}</b>
      </ng-template>
    </rz-grid-column>
    <rz-grid-column format="int16" property="UnitsOnOrder" title="Units On Order" type="integer">
    </rz-grid-column>
    <rz-grid-column format="int16" property="ReorderLevel" title="Reorder Level" type="integer">
    </rz-grid-column>
    <rz-grid-column property="Discontinued" title="Discontinued" type="boolean">
    </rz-grid-column>
  </rz-grid>

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

Example request

http://services.radzen.com/odata/OrderDetails?$filter=contains(Product/ProductName,%20%27Ch%27)&$top=10&$skip=0&$orderby=Product/ProductName%20desc&$expand=Order,Product&$count=true

Still using Radzen Studio? Achieve more with Radzen Blazor Studio