Vue UI Components Documentation

Grid Grouping

The jqxGrid component supports data grouping against one or more columns.

Grouping is allowed if the 'groupable' property is set to true. End-users can group data by dragging column headers to the Group Panel. This panel's visibility is controlled by the showgroupsheader property.

The code example below shows a Grid templatate with one grouping column: 
<JqxGrid ref="myGrid" :width="width" :source="dataAdapter" :columns="columns"
         :groupable="true" :groups="['Title']">
</JqxGrid>

Basic Grid with Grouping 

<template>
    <JqxGrid ref="myGrid" :width="800" :source="dataAdapter" :columns="columns"
             :groupable="true" :groups="['Title']" />
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Contact Name', datafield: 'ContactName', width: 240 },
                    { text: 'Contact Title', datafield: 'Title', width: 240 },
                    { text: 'City', datafield: 'City', width: 150 },
                    { text: 'Country', datafield: 'Country' }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                localdata: [
                    ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
                    ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
                    ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
                    ['Thomas Hardy', 'Sales Representative', 'London', 'UK'],
                    ['Christina Berglund', 'Order Administrator', 'Lule', 'Sweden'],
                    ['Hanna Moos', 'Sales Representative', 'Mannheim', 'Germany'],
                    ['Frdrique Citeaux', 'Marketing Manager', 'Strasbourg', 'France'],
                    ['Martn Sommer', 'Owner', 'Madrid', 'Spain'],
                    ['Laurence Lebihan', 'Owner', 'Marseille', 'France'],
                    ['Elizabeth Lincoln', 'Accounting Manager', 'Tsawassen', 'Canada'],
                    ['Victoria Ashworth', 'Sales Representative', 'London', 'UK'],
                    ['Patricio Simpson', 'Sales Agent', 'Buenos Aires', 'Argentina']
                ],
                datafields: [
                    { name: 'ContactName', type: 'string', map: '0' },
                    { name: 'Title', type: 'string', map: '1' },
                    { name: 'City', type: 'string', map: '2' },
                    { name: 'Country', type: 'string', map: '3' }
                ],
                datatype: 'array'
            };
        }
    }
</script>

To hide the grouping panel, set the 'showgroupsheader' property to false. 

<template>
    <JqxGrid ref="myGrid" :width="800" :source="dataAdapter" :columns="columns"
             :groupable="true" :groups="['Title']" :showgroupsheader="false" />
</template>

The 'addgroup', 'insertgroup', 'removegroup' and 'removegroupat' functions enable groups manipulation with the Grid API. 

this.$refs.myGrid.addgroup('City');

*The functions should be called after the Grid data is loaded. When the data is loaded and the Grid is ready, the 'bindingcomplete' event is raised.
The 'closeablegroups' property enables or disables the close buttons displayed in each group header. 

<template>
    <JqxGrid ref="myGrid" :width="800" :source="dataAdapter" :columns="columns"
             :groupable="true" :groups="['Title']" :closeablegroups="false" />
</template>

The 'expandgroup' and 'collapsegroup' functions expand or collapse a group at a specific index. The code below expands the second group: 

this.$refs.myGrid.expandgroup(1);

The 'expandallgroups' and 'collapseallgroups' functions expand or collapse all groups in the Grid.


When a group is expanded or collapsed, the 'groupexpand' or 'groupcollapse' event is raised. 

<JqxGrid ref="myGrid" @groupexpand="onGroupExpand($event)"
         :width="width" :source="dataAdapter" :columns="columns"
         :groupable="true" :groups="['Title']">
</JqxGrid>

... 
methods: {
    onExpandGroup: function (event) {
        let args = event.args;
        let group = args.group;
        let level = args.level;
    }
}

The 'groupsexpandedbydefault' boolean property specifies the default state of the groups when displayed in the Grid. By default all groups are collapsed.