Footer aggregates template problem

[Masoud Moghaddari]

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

[Seeni Sakthi Kumar Seeni Raj]

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.  

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

Regards,  

Seeni Sakthi Kumar S 

[Masoud Moghaddari]

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

[Manivel Sellamuthu]

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 

[Masoud Moghaddari]

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

[Seeni Sakthi Kumar Seeni Raj]

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 

[Masoud Moghaddari]

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

[Seeni Sakthi Kumar Seeni Raj]

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