DataGrid (Angular)link

This guide demonstrates how to use the DataGrid component.

Quick videolink

DataGrid Propertieslink

DataGrid Eventslink

GridColumn Propertieslink

Customizing the column appearancelink

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.

Footer templatelink

• <b>TOTAL: ${totalUnitPrice | currency}</b> - display the total UnitPrice property in a <b></b> 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 declarationlink

  <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 operationslink

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 fieldslink

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