Aggregates using Composition API / Script Setup Typescript

[Ernesto]

Hello

Would you please provide me with an example of how to add a footer aggregates using Composition API? I am stuck when trying to setup the template. The following code does not show anything:

Thanks!

[Pon Selva Jeganathan]

Hi Ernesto,

Query: Would you please provide me with an example of how to add a footer aggregates using Composition API? I am stuck when trying to setup the template.

We achieved your requirement by using the below code example:

In the code example below, we have use a separate Vue component as a template for the aggregate column in the footer. The Template component is registered using the provided Vue instance (app). It is bound to the NameColumnTemp component and used as a footer template for a aggregate column.

Please refer to the below code snippet,

 

 

 

<template>

  <ejs-treegrid :dataSource="data"

    childMapping="subtasks" :height='450'>

    <e-columns>

        <e-column field='ID' headerText='S.No' width='90' textAlign='Right'></e-column>

        <e-column field='Name' headerText='ShipMent Name' width='220'></e-column>

        <e-column field='category' headerText='Category' width='220'></e-column>

        <e-column field='unitPrice' headerText='Unit Price($)' format='c2' width='120' textAlign='Right'></e-column>

        <e-column field='price' headerText='Price($)' width='100' format='c' textAlign='Right'></e-column>

    </e-columns>

    <e-aggregates>

      <e-aggregate :showChildSummary='false'>

        <e-aggregate-columns>

            <e-aggregate-column columnName="category" type="Custom" 

              :customAggregate="customAggregateFn" 

              :footerTemplate='ColumnTemplate' >

             

            </e-aggregate-column>

        </e-aggregate-columns>

      </e-aggregate>

    </e-aggregates>

  </ejs-treegrid>

</template>

 

<script>

import { TreeGridComponent, regateColumnDirective } from "@syncfusion/ej2-vue-treegrid";

import {summaryData} from './data.js';

import { getObject } from '@syncfusion/ej2-grids';

import { createApp } from "vue";

 

import NameColumntemp from './NameColumn.vue';

// import { createApp } from 'vue/dist/vue.esm-bundler';

const app = createApp();

let value = 'Frozen seafood';

let colVue = app.component("ColumnTemplate", NameColumntemp );

var ColumnTemplate = () => {return { template: colVue}};

 

……

 

 

NameColumn.Vue

 

<template>

 <div id="NameColumntemp">

 <b>Count of Frozen seafood:{{data.Custom}}</b>

 </div>

</template>

 

<script>

 

export default {

 name: 'NameColumntemp',

 data() {

 return {

}

 }

}

</script>

 

 

 

Refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample633200211221281130

Please refer to the below screenshot,

Still if you are facing issue, please provide the following information.

1. Package version details
2. Video demo or screenshot of the issue
3. Script error details( if face any)
4. If possible, share the issue reproducible sample or reproduce the issue in above shared sample.

The provided information will be helpful to proceed further.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ernesto]

Thanks a lot for you kind reply. I took a different road for getting a "TOTAL" row, which I believe is simpler:

1) In the datasource I manage to produce a "TOTAL" row, with the field "isparentrow" equal  zero, so that the expansion icon is not shown.

2) I added an event handler for the rowDatabound event, so that I can change the style of the "TOTAL" row:

Regards.

[Suganya Gopinath]

Hi Ernesto, 

Thanks for sharing the status of the issue, please get back to us for further assistance when needed. 

[Ernesto]

Hello

Although I am actually using the Vue version of the TreeGrid, I was checking the documentation of the Ej2 TypeScript version and I found this:

It seems that I can have pre-aggregated values in the json object used as datasource and the treegrid will use for displaying a footer row - am I right? But, if so, how can I match the aggregate with the corresponding column?

[Pon Selva Jeganathan]

Hi Ernesto,

Query: It seems that I can have pre-aggregated values in the json object used as datasource and the treegrid will use for displaying a footer row - am I right? But, if so, how can I match the aggregate with the corresponding column?

Based on the screenshot you provided, it appears that you are utilizing remote data binding with aggregates functionality in your TreeGrid. In the context of remote data binding, aggregates are typically computed on the server side, and the aggregate values are assigned to properties named in the field-type format, as demonstrated in your screenshot. These assigned values will then be displayed in the corresponding columns of the TreeGrid.

However, if you wish to calculate aggregates with local data binding, we recommend using the custom aggregate feature of the TreeGrid. Custom aggregate values can be accessed within templates using the key ${Custom}.

Refer to the below demo,

https://ej2.syncfusion.com/vue/demos/#/material3/tree-grid/custom-aggregate.html

If we misunderstand your requirement, kindly share the below details which is helpful to proceed further.

1. Detailed explanation of your requirement
2. Confirm whether you are using the local data binding or remote data binding feature.
3. A video demo or screenshot that demonstrates your requirement.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.