Footer aggregates template problem

Masoud Moghaddari

Asked On October 13, 2019 02:32 PM UTC

Hi there,

In my project, I'm showing Data Grid by passing a URL of Json data to the grid and looping throught column headers with a "v-for" loop.
I get error when I try to implement footer aggregates. Please kindly review my attached files and help me with my issue.

Attachment: question_5d1816ea.zip

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On October 15, 2019 12:19 PM UTC

Hi Masoud,

Greetings from Syncfusion.

Please check dataSource or JSON data provided is correct or not. We could see the difference between the field name datasource property. In Grid columns, we are having id whereas the aggregate is having the ‘account_type_id’. This might also cause some rendering issue. We have also prepared a sample with the provided JSON structure. Refer to the sample link,

https://stackblitz.com/edit/s2srgb?file=index.js

Please share the following details to analyze the problem at our end.

Complete code example of the Grid
How the columns were built dynamically
Mention the version of the ej2-vue-grids and its dependent packages

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Masoud Moghaddari

Replied On October 16, 2019 04:41 AM UTC

Dear,

Thanks for your replay.
In my application, I need to load the data with a v-for loop. I've prepared a simple sample with only one field and also wrote my dependency versions in a txt file which I attached.
Note that in my vue code, on the line 60, when I inject header data manually everything works fine. But when I fetch the remote data, I got "Uncought typeError 'cloneNode' of null '".

Best Regards

Masoud

Attachment: sample_31c98e78.zip

Reply | Reply with quote

Manivel Sellamuthu [Syncfusion]

Replied On October 16, 2019 02:36 PM UTC

Hi Masoud,

Thanks for your update.

Grid is not assigned with the columns and aggregates at the initial binding. Even though, we are binding required columns and aggregate values in the mounted event, the required data from them were retrieved in the asynchronous call only. In this case, aggregates is bound with empty object and they are not enough to bind the footer rows. So, we suggest you to use the below way to achieve your requirement.

App.vue

<ejs-grid ref="grid" :dataSource="data" :dataBound="dataBound" :allowPaging="true" :pageSettings='pageOption' >

<e-columns>

<e-column v-for="(value, index) in headers" v-bind:key="index" :field='value.field' :headerText='value.headerText'

:type="value.type"></e-column>

</e-columns>

</ejs-grid>

export default Vue.extend({

methods:{

setData() {

. . .

},

dataBound : function () {

this.$refs.grid.aggregates = [{columns:[{field:'id',type:'sum',footerTemplate:this.sumTemplate}]}]

},

}

});

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

Regards,

Manivel

Reply | Reply with quote

Masoud Moghaddari

Replied On October 20, 2019 02:26 PM UTC

Hi Manivel,

Thanks for your reply.

I did what you suggested. But unfortunately I have two issues:
1- The sum value is not showing up.
2- I get a warning from Vue.
I've prepared a simple example with just two rows and one column. Please kindly review my attachment.

Best Regards
Masoud

Attachment: example_a65c2aa.zip

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On October 22, 2019 08:47 AM UTC

Hi Masoud,

Thanks for your update.

Query: 1- The sum value is not showing up.

We have reviewed the attachment and the type of aggregate is denoted in a lowercase is the cause of the issue. We need to set the type as “Sum” to resolve the issue. Please find the below code example.

App.vue

onDataBound : function () {

this.$refs.grid.ej2Instances.setProperties({aggregates : [{columns:[{field:'id',type:'Sum',footerTemplate:this.sumTemplate}]}]})

}

Query-2: I get a warning from Vue.

We have validated the waring and that arises due to we change the aggregate property of the VueComponent(Grid). So we suggest you to use setProperties method to achieve you requirement.

App.vue

<ejs-grid ref="grid" :dataSource="data" :dataBound="onDataBound" >

<e-columns>

<e-column v-for="(value, index) in headers" v-bind:key="index" :field='value.field' :headerText='value.headerText' ></e-column>

</e-columns>

</ejs-grid>

. . .

onDataBound : function () {

// using setproperties to set aggregates dynamically

this.$refs.grid.ej2Instances.setProperties({aggregates : [{columns:[{field:'id',type:'Sum',footerTemplate:this.sumTemplate}]}]})

}

We have prepared a working sample for your convenience. Please find the below sample:

Sample: https://www.syncfusion.com/downloads/support/forum/148275/ze/Vue-footer-aggregate-1482751440176544

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

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Masoud Moghaddari

Replied On October 22, 2019 01:24 PM UTC

Hi Seeni,

Your sample solved my issue. Thanks a lot.
One more question, can I show a custom value in table footer instead of automatically calculated value?

Thanks

Masoud

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On October 23, 2019 09:17 AM UTC

Hi Masoud,

We are happy to hear that your issue has been resolved.

You can customAggregate to show a custom value. To use custom aggregation, specify the type as Custom and provide the custom aggregate function in the customAggregate property. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/aggregates/#custom-aggregate

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148275	Oct 13,2019 02:32 PM UTC	Oct 23,2019 09:17 AM UTC	Vue	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US