We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Footer aggregates template problem

Thread ID:

Created:

Updated:

Platform:

Replies:

148275 Oct 13,2019 02:32 PM UTC Oct 23,2019 09:17 AM UTC Vue 7
loading
Tags: Data Grid
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

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, 


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
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

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 


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

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:  


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

Regards, 
Seeni Sakthi Kumar S 


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

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. 


Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon