We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Aggregate Row on first row (not footer)

Thread ID:





150174 Dec 23,2019 06:46 PM UTC Jan 3,2020 09:34 AM UTC React - EJ 2 3
Tags: Grid
Aman Thapar
Asked On December 23, 2019 06:46 PM UTC

I want to have the aggregate row appear on the top of the grid. not at the bottom. 

is this possible? it can always show on row 0, even if you change the pages, the aggregate row will show at the top.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 24, 2019 10:05 AM UTC

Hi Aman, 

Greetings from the Syncfusion support, 

Query: is this possible? it can always show on row 0, even if you change the pages, the aggregate row will show at the top 

We could see that you would like to display the aggregate footer content at the top of Grid below the header. by default, our Syncfusion grid architecture follows display of aggregate in footer of Grid. This is our architectural standard. We suggest you to use the “dataBound” event of Grid. In this event handler we have replaced the DOM element of the footer aggregate above the first row and below the header content. In the below code, we have used the “append” function to replace the DOM elements which can be fetched by using the “getHeaderContent” and “getFooterContent” methods of Grid. 

You can be updating the aggregate value while paging the Grid using “customAggregate” property. Please refer to the below code example for more information. 
export class AggregateDefault extends SampleBase { 
    constructor() { 
        this.pageSettings = { pageCount: 5 }; 
    footerSum(props) { 
        return (<span>Sum: {props.Custom}</span>); 
.     .     .    . 
        let freight_total = 0;  //Perform your custom aggregation here 
      for(let i=0; i<args.result.length;i++) { 
      freight_total += args.result[i].Freight; 
      return freight_total; 
    render() { 
        return (<div className='control-pane'> 
        <div className='control-section'> 
          <GridComponent ref={g=>this.gridInstance=g} dataSource={data} allowPaging={true} pageSettings={this.pageSettings} dataBound={this.dataBound.bind(this)}> 
            .     .     .     . 
                  <AggregateColumnDirective field='Freight' type='Custom' format='C2' customAggregate={this.customAggregateFn.bind(this)} footerTemplate={this.footerSum}> </AggregateColumnDirective> 
            <Inject services={[Page, Aggregate]}/> 

Help Documentation:  
Please get back to us, if you need further assistance. 
Thavasianand S. 

Aman Thapar
Replied On January 2, 2020 03:32 PM UTC

Thank you. If we want the aggregate amount to be fixed for the entire dataset (not by page) can we use the "Sum" type? 

Balaji Sekar [Syncfusion]
Replied On January 3, 2020 09:34 AM UTC

Hi Aman, 
Thanks for your update. 
You can achieve your requirement “Aggregate amount to be fixed for the entire dataset” using below code customization in aggregate custom function (customAggregateFn). Here we calculated sum from complete dataSource. Please refer to the below code and sample link. 
      let freight_total = 0;      //Perform your custom aggregation here 
      for(let i=0; i< this.gridInstance.dataSource.length;  i++) {  // complete data list 
      freight_total += this.gridInstance.dataSource[i].Freight; 
      return freight_total; 
Please get back to us, if you need any further assistance. 
Balaji Sekar. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon