React EJ2 Syncfusion, conditional rendering AggregatesDirective

Question

I have a custom aggregate functions available to use from a context menu. What I want to achieve is to render the result from the desired function in the footer of a Grid but with a condition.

To be more specific, the difference between my functions and the ones syncfusion has is that mine do the calculation on a column specified by the user. This is what I have tried that doesn't seem to work.

{x && selectedOption ? (
              <AggregatesDirective>
                <AggregateDirective>
                  <AggregateColumnsDirective>
                    <AggregateColumnDirective
                      field={x.toString()}
                      type="selectedOption"
                      groupFooterTemplate={groupFooterTemplate}
                    />
                  </AggregateColumnsDirective>
                </AggregateDirective>
              </AggregatesDirective>
) : null}

This is where x get its value:

  function getSelectedColumnNames() {
    if (gridInstance) {
      x = gridInstance!
        .getSelectedColumnsUid()
        .map((uid: any) => gridInstance!.getColumnByUid(uid).field);
    }
  }

And selectedOption get its value from selecting an option in the context menu, like this:

const contextMenuClick = (args: MenuEventArgs) => {
    if (gridInstance && args.item.id === "MIN") {
      groupFooterMin();
      setSelectedOption("min");
    } else if (gridInstance && args.item.id === "MAX") {
      groupFooterMax();
      setSelectedOption("max");
    } else if (gridInstance && args.item.id === "SUM") {
      groupFooterSum();
      setSelectedOption("sum");
    } else if (gridInstance && args.item.id === "AVG") {
      groupFooterAvg();
      setSelectedOption("avg");
    }
  };

Answer 1

The Syncfusion EJ2 Grid does support displaying custom aggregates, and we've created a sample-level solution that demonstrates how to achieve this. The sample showcases how to display the aggregate value from your custom function in the footer of the Grid for different columns by selecting items in the context menu.

For more information, please refer to the below code example, documentation, and sample.

[index.js]

  const contextMenuItems = [
    { text: 'Sum', target: '.e-content', id: 'sum' },
    { text: 'Count', target: '.e-content', id: 'count' },
  ];

  const sumCustom = (props) => {
    return <span>Sum Custom: {props.Custom}</span>;
  };

  const countCustom = (props) => {
    return <span>Count Custom: {props.Custom}</span>;
  };

  const sumCustomAggregateFn = (args) => {
// do the calculation and return the value
    return 1;
  };

  const countCustomAggregateFn = (args) => {
// do the calculation and return the value
    return 2;
  };

  const contextMenuClick = (args) => {
    if (grid && args.item.id === 'sum') {
      const sum = [
        {
          columns: [
            {
              type: 'Custom',
              customAggregate: sumCustomAggregateFn,
              columnName: 'Freight',
              footerTemplate: sumCustom,
            },
          ],
        },
      ];
      grid.setProperties({ aggregates: sum });
    } else if (grid && args.item.id === 'count') {
      const count = [
        {
          columns: [
            {
              type: 'Custom',
              customAggregate: countCustomAggregateFn,
              columnName: 'ShipCountry',
              footerTemplate: countCustom,
            },
          ],
        },
      ];
      grid.setProperties({ aggregates: count });
    }
  };

        <GridComponent
          dataSource={data}
          allowPaging={true}
          pageSettings={pageSettings}
          contextMenuItems={contextMenuItems}
          ref={(g) => (grid = g)}
          contextMenuClick={contextMenuClick}
        >

Custom aggregate: https://ej2.syncfusion.com/react/documentation/grid/aggregates/custom-aggregate

Sample: https://stackblitz.com/edit/react-3opxvw?file=index.js