Aggregate Row on first row (not footer)

[Aman Thapar]

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.

[Thavasianand Sankaranarayanan]

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>  

Sample link: https://stackblitz.com/edit/react-1fkb13-9r7jzt?file=index.js 

 

Help Documentation:  

https://ej2.syncfusion.com/ react/documentation/api/grid/#databound 

https://ej2.syncfusion.com/ react/documentation/api/grid/#getheadercontent 

https://ej2.syncfusion.com/ react/documentation/api/grid/#getfootercontent 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Aman Thapar]

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]

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; 

    } 

 

Sample link: https://stackblitz.com/edit/react-1fkb13-2eqdtt?file=index.js 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Balaji Sekar.