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

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.

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

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.

...

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