Search results

Custom Aggregate in React TreeGrid component

02 Feb 2023 / 2 minutes to read

To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the type as Custom, and provide the custom aggregate function in the customAggregate property.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { summaryData } from './datasource';
function App() {
    const footerSum = (props) => {
        return (<span>Total: {getObject('Sum', props)}</span>);
    };
    const customAggregateFn = (row) => {
        const sampleData = getObject('result', row);
        let countLength = 0;
        sampleData.filter((item) => {
            const data = getObject('category', item);
            const value = 'Frozen seafood';
            if (data === value) {
                countLength++;
            }
        });
        return countLength;
    };
    const custom = (props) => {
        return (<span> Count of Frozen seafood: {getObject('Custom', props)}</span>);
    };
    return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0} childMapping='subtasks' height='260'>
        <ColumnsDirective>
            <ColumnDirective field='category' headerText='Category' width='160'/>
            <ColumnDirective field='units' headerText='Total Units' width='130' type='number' textAlign='Right'/>
            <ColumnDirective field='unitPrice' headerText='Unit Price($)' width='90' textAlign='Right' type='number' format='C2'/>
            <ColumnDirective field='price' headerText='Price($)' type='number' width='160' textAlign='Right' format='C'/>
        </ColumnsDirective>
            <AggregatesDirective>
            <AggregateDirective showChildSummary={false}>
                <AggregateColumnsDirective>
                <AggregateColumnDirective field='price' columnName='category' type='Custom' customAggregate={customAggregateFn} footerTemplate={custom}/>
                </AggregateColumnsDirective>
                </AggregateDirective>
        </AggregatesDirective>
        <Inject services={[Aggregate]}/>
    </TreeGridComponent>;
}
;
export default App;
Copied to clipboard
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { summaryData } from './datasource';

function App() {
    const footerSum = (props:object) => {
        return(<span>Total: {getObject('Sum', props)}</span>)
    }

    const customAggregateFn = (row: object) => {
        const sampleData: object[] = getObject('result', row);
        let countLength: number = 0;
        sampleData.filter((item: object) => {
            const data: string = getObject('category', item);
            const value: string = 'Frozen seafood';
            if (data === value) {
                countLength++;
            }
        });
        return countLength;
    }

    const custom = (props: object) => {
        return(<span> Count of Frozen seafood: {getObject('Custom', props)}</span>)
    }

    return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0} childMapping='subtasks' height='260'>
        <ColumnsDirective>
            <ColumnDirective field='category' headerText='Category' width='160'/>
            <ColumnDirective field='units' headerText='Total Units' width='130' type='number' textAlign='Right'/>
            <ColumnDirective field='unitPrice' headerText='Unit Price($)' width='90' textAlign='Right' type='number' format='C2' />
            <ColumnDirective field='price' headerText='Price($)' type='number' width='160' textAlign='Right' format='C' />
        </ColumnsDirective>
            <AggregatesDirective>
            <AggregateDirective showChildSummary={false}>
                <AggregateColumnsDirective>
                <AggregateColumnDirective field='price' columnName='category' type='Custom'
                    customAggregate ={customAggregateFn} footerTemplate={custom}/>
                </AggregateColumnsDirective>
                </AggregateDirective>
        </AggregatesDirective>
        <Inject services={[Aggregate]}/>
    </TreeGridComponent>
};
export default App;

To access the custom aggregate value inside the template, use the key as Custom.