Grouping in Vue Grid component
22 Mar 202320 minutes to read
The Grid has options to group records by dragging and dropping the column header to the group drop area. When grouping is applied, grid records are organized into a hierarchical structure to facilitate easier expansion and collapse of records.
To enable Grouping in the grid, set the allowGrouping
to true.
Grouping options can be configured in groupSettings
.
To use Grouping, you need to inject Group
module in the provide section.
To get start quickly with Grouping Options, you can check on this video:
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' height='267px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data
};
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
- You can group and ungroup columns by using the
groupColumn
andungroupColumn
methods.- To disable grouping for a particular column, set the
columns.allowGrouping
to false.
Initial group
To apply group at initial rendering, set the column field name in the groupSettings.columns
.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' :groupSettings='groupOptions' height='267px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
groupOptions: { columns: ['CustomerID', 'ShipCity'] }
};
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Hide drop area
To avoid ungrouping or further grouping of a column after initial column
grouping, define the groupSettings.showDropArea
as false.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' :groupSettings='groupOptions' height='267px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
groupOptions: { showDropArea: false, columns: ['CustomerID', 'ShipCity'] }
};
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Group with paging
On grouping columns with paging feature, the aggregated information and total items are displayed based on the current page.
The grid does not consider aggregated information and total items from other pages.
To get additional details (aggregated information and total items) from other pages,set the groupSettings.disablePageWiseAggregates
to true.
If remote data is bound to grid dataSource, two requests will be sent when performing grouping action;one for getting the grouped data and another for getting aggregate details and total items count.
Group by format
By default, columns will be grouped by the data or value present for the particular row. To group numeric or datetime column based on the mentioned format, you have to enable the enableGroupByFormat
property of the corresponding grid columns.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' :groupSettings='groupOptions' height='315px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMMM' :enableGroupByFormat='true' width=150 type='date'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' :enableGroupByFormat='true' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
groupOptions: { columns: ['OrderDate', 'Freight'] }
};
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Grouping events
During the group action, the grid component triggers two events. The actionBegin
event triggers before the group action starts and the actionComplete
event triggers after the group action is completed. Using these events you can perform any action.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' :actionComplete='actionHandler' :actionBegin='actionHandler' height='260px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data
};
},
methods: {
actionHandler: function(args) {
alert(args.requestType + ' ' + args.type); // custom Action
}
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
args.requestType
is current action name.
For example in grouping, theargs.requestType
value is grouping.
Collapse by external button
To collapse the selected grouped row from an external button by using the expandCollapse
method.
<template>
<div id="app">
<ejs-button id='collapse' cssClass='e-flat' @click.native='collapse'>Collapse</ejs-button>
<ejs-grid ref='grid' :dataSource='data' :allowGrouping='true' :groupSettings='groupSettings' height='240px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
data: data,
groupSettings: { columns: ['CustomerID'] }
};
},
methods: {
collapse: function() {
if (this.$refs.grid.getSelectedRowIndexes().length) {
let currentTr = this.$refs.grid.getRows()[this.$refs.grid.getSelectedRowIndexes()[0]];
while (currentTr.classList && currentTr.classList.length) {
currentTr = currentTr.previousSibling;
}
let collapseElement = currentTr.querySelector('.e-recordplusexpand');
this.$refs.grid.ej2Instances.groupModule.expandCollapseRows(collapseElement); // pass the collapse row element.
}
}
},
provide: {
grid: [Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Diacritics filter
By default, grid ignores diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent
as true.
In the following sample, type mun in Ship City column to filter diacritic characters.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
filterOptions: {
ignoreAccent: true
}
};
},
provide: {
grid: [Filter]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Sort grouped columns in descending order during initial grouping
By default, grouped columns are sorted in ascending order. To sort grouped columns in descending order during initial grouping, you can set the field and direction in the sortSettings.columns
property.
The CustomerID
column will be sorted in descending order when the grid is initially grouped, as shown in the following example.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowGrouping='true' :allowSorting='true' :sortSettings='sortOptions' :groupSettings='groupSettings' height='267px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group, Sort } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
sortOptions: { columns: [{ field: 'CustomerID', direction: 'Descending' }] },
groupSettings: { columns: ['CustomerID'] }
};
},
provide: {
grid: [Group, Sort]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>