1. Home
  2. Forum
  3. React - EJ 2
  4. Aggregate Row on first row (not footer)

Aggregate Row on first row (not footer)

Hello,
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.

thanks.

3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team 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. 
[index.js] 
dataBound(args){ 
       this.gridInstance.getHeaderContent().append(this.gridInstance.getFooterContent()); 
    } 

You can be updating the aggregate value while paging the Grid using “customAggregate” property. Please refer to the below code example for more information. 
[index.js] 
export class AggregateDefault extends SampleBase { 
    constructor() { 
        super(...arguments); 
        this.pageSettings = { pageCount: 5 }; 
    } 
    footerSum(props) { 
        return (<span>Sum: {props.Custom}</span>); 
    }  
.     .     .    . 
    customAggregateFn(args){       
        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)}> 
            <ColumnsDirective>              
            .     .     .     . 
            </ColumnsDirective> 
            <AggregatesDirective> 
                <AggregateDirective> 
                  <AggregateColumnsDirective> 
                  <AggregateColumnDirective field='Freight' type='Custom' format='C2' customAggregate={this.customAggregateFn.bind(this)} footerTemplate={this.footerSum}> </AggregateColumnDirective> 
                  </AggregateColumnsDirective> 
                  </AggregateDirective>               
            </AggregatesDirective> 
            <Inject services={[Page, Aggregate]}/> 
          </GridComponent>  


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


AT Aman Thapar 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? 

BS Balaji Sekar Syncfusion Team 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. 
 
customAggregateFn(args){ 
      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. 
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon