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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

AggregateColumn by column menu

Thread ID:

Created:

Updated:

Platform:

Replies:

142839 Feb 21,2019 02:09 PM UTC Feb 26,2019 01:14 PM UTC Vue 5
loading
Tags: Data Grid
Stefan Tmusic
Asked On February 21, 2019 08:39 PM UTC

When I click on the column menu, I am gonna display the aggregate column.


Attachment: Untitled_2613fb42.zip

Madhu Sudhanan P [Syncfusion]
Replied On February 22, 2019 10:12 AM UTC

Hi Michal, 

Thanks for contacting Syncfusion support. 

You can achieve your requirement using custom column menu items and handling the click action in the columnMenuClick event. 


new Vue({   
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid"  :dataSource="data" height='315px' :showColumnMenu="true"  
        :columnMenuItems="columnMenuItems" 
        :columnMenuClick="columnMenuClick"> 
          <e-columns> 
          .... 
          </e-columns> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      data: data, 
      columnMenuItems: [{text:'Aggregate Sum', id:'aggsum'}, 
      {text:'Remove Aggregate', id:'aggremove'}], 
    }; 
  }, 
    provide: { 
    grid: [Edit,Toolbar,ContextMenu, Aggregate, ColumnMenu] 
  } 
   
  methods: { 
    columnMenuClick: function(args) { 
        if(args.item.id === 'aggsum'){ 
            this.$refs.grid.aggregates = [{ 
              columns: [{ 
                field: 'Freight', type: 'Sum', format: 'c2' 
              }] 
            }]; 
        } 
        if(args.item.id === 'aggremove') { 
            this.$refs.grid.aggregates = []; 
        }   
    } 
  } 
}); 





Regards, 
Madhu Sudhanan P 


Stefan Tmusic
Replied On February 22, 2019 04:33 PM UTC

Thanks.
But I am facing the issue.
this.$refs.grid.aggregates = [{ 
              columns: [{ 
                field: 'Freight'type: 'Sum'format: 'c2' 
              }] 
            }]; 
- How to aplly groupfootertemplate ?
- The Sum is not displayed.
- And I have the following issue.
" [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "aggregates"

found in "




import Vue from "vue";
import { GridPlugin,Edit,Toolbar ,ContextMenu, ColumnMenu, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);


new Vue({  
el: '#app',
template: `
   
       
        :columnMenuItems="columnMenuItems"
        :columnMenuClick="columnMenuClick">
         
           
           
           
           
         
             
               
                   
                         
                       
                   
               
           
       
   
`,

  data() {
    return {
      data: data,
       sumTemplate: function() {
        return {
            template: Vue.component('sumTemplate', {
            template: ` {{data.Sum}}`,
            data: function () {return {data: {}};}
            })
        }
      },
      columnMenuItems: [{text:'Aggregate Sum', id:'aggsum'},
      {text:'Remove Aggregate', id:'aggremove'}],
    };
  },
    provide: {
    grid: [Edit,Toolbar,ContextMenu, Aggregate, ColumnMenu]
  }
  
  methods: {
    columnMenuClick: function(args) {
        if(args.item.id === 'aggsum'){
            this.$refs.grid.aggregates = [{
              columns: [{
                field: 'Freight', type: 'Sum', format: 'c2'
              }]
            }];
        }
        if(args.item.id === 'aggremove') {
            this.$refs.grid.aggregates = [];
        }
        
    }
  }
});
    document.getElementById("duplicate").addEventListener("click", (e) => {
        var obj = document.getElementById('Grid').ej2_instances[0]
        var duplicate = obj.columns[0];  //Get the 
        obj.columns.push(duplicate);
        obj.refresh();
      });

Madhu Sudhanan P [Syncfusion]
Replied On February 25, 2019 11:18 AM UTC

Hi Michal, 
 
Thanks for the update. 
 
The group footer template should be provided as follow to show the sum value properly.  


this.$refs.grid.aggregates = [{ 
              columns: [{ 
                field: 'Freight', type: 'Sum', format: 'c2', 
                groupFooterTemplate: function() { 
                  return { 
                    template: Vue.component('sumTemplate', { 
                        template: `<span>Sum: {{data.Sum}}</span>`, 
                        data: function () { 
                          return {  
                            data: { 
                              data: {} 
                            } 
                          }; 
                        } 
                    }) 
                  } 
                } 
              }] 
            }] 


For your convenience we have modified the previous sample and the same can be referred from the below link. 


Also we are unable to reproduce the error “[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.” and hence could you please share more information such as screenshot/video with sample code or sample if possible to analyze at our end. 

Regards, 
Madhu Sudhanan P 


Stefan Tmusic
Replied On February 25, 2019 12:44 PM UTC

I have the same issue.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "aggregates"

found in

---> <GridComponent>
       <App> at src/App.vue
         <Root>

Attachment: App_2887b81.zip

Madhu Sudhanan P [Syncfusion]
Replied On February 26, 2019 01:14 PM UTC

Hi Michal, 

Thanks for the update. 

The reported problem occurs when using tag declaration of the aggregate property and modifying the aggregate property directly and to resolve this, we suggest to use data object to define aggregate property instead of provide the aggregates directly in tag directive. Please refer the following code snippet, 

<template> 
    <div id="app"> 
        <ejs-grid ref='grid' :load='load' :aggregates="aggregates" > 
 
            ...... 
 
       </ejs-grid> 
    </div> 
</template> 
<script> 
    export default { 
        data() { 
            return { 
                data: data, 
                aggregates: [ 
                    { 
                        columns: [ 
                            { type: "Count", field: "groupTitle", groupFooterTemplate: 'countTemplate' }, 
                            { type: "Custom", columnName: "status", customAggregate: "customAggregateStatus", groupFooterTemplate: 'statusTemplate' }, 
                            { type: "Sum", field: "numbers", groupFooterTemplate: 'sumTemplate' } 
                        ] 
                    } 
                ], 
 
                ... 
            }; 
        }, 
        provide: { 
 
        }, 
        methods: { 
            columnMenuClick(args) { 
                if (args.item.parentObj.id === 'aggregate') { 
 
                    this.aggregates = [{ 
                        columns: [{ 
                            field: 'numbers', type: args.item.text 
                        }] 
                    }]; 
                } 
            }, 
 
            ... 
 
        } 
    } 
</script> 

We have modified your code with this solution and that can be download from the below link, 

 
Regards, 
Madhu Sudhanan P.  


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

;