CODEWITHSUNDEEP
angular9syncfusion
Jethij
Jethij

Reputation: 21

Syncfusion EJS-GRID ANGULAR

I would like to get grid total rows count before and after column filter.

Syncfusion ejs-grid in angular9

Please help me here.

Upvotes: 1

Views: 4603

Answers (1)

J.M.Farook
J.M.Farook

Reputation: 183

Based on your query we suspect that you want to display the total records count in the Grid. To achieve your requirement we used the Aggregate feature of EJ2 Grid. The Aggregate values are displayed in the footer, group footer, and group caption of Grid, to show the aggregate value in any of these cells, use the footerTemplate, groupFooterTemplate and groupCaptionTemplate properties.

The aggregate value will be changed when we perform filtering in any of the columns. In the below sample we have bound the row count details in the footer of the Grid component using the Aggregate feature

Please refer to the below code example and sample for more information.

[app.component.html]

<ejs-grid [dataSource]="data" [allowPaging]="true" allowFiltering="true" [pageSettings]='pageOption'> 
    <e-columns> 
        <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
        <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'></e-column> 
        <e-column field='OrderDate' headerText='Order Date' width='150' format="yMd" textAlign='Right'></e-column> 
        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
    </e-columns> 
<e-aggregates> 
  <e-aggregate> 
    <e-columns> 
      <e-column columnName="CustomerName" type="Count"> 
        <ng-template #footerTemplate let-data>Rows Count: {{data.Count}}</ng-template> 
      </e-column> 
    </e-columns> 
  </e-aggregate> 
</e-aggregates> 
</ejs-grid>

sample

Help Documentation:

doc- built-in-aggregate-types

doc-footer-aggregate

Upvotes: 1

Related Questions