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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Vue
  4. AggregateColumn by column menu

AggregateColumn by column menu

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


Attachment: Untitled_2613fb42.zip

5 Replies
MS Madhu Sudhanan P Syncfusion Team 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 


ST Stefan Tmusic 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();
      });

MS Madhu Sudhanan P Syncfusion Team 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 


ST Stefan Tmusic 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

MS Madhu Sudhanan P Syncfusion Team 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.  


Loader.
Up arrow icon