GroupPanel

The GroupPanel control allows you to add a drag-drop grouping UI to any FlexGrid control.

To use the GroupPanel, include the "wijmo.grid.grouppanel.js" file in your app, add an element to hold the grouping UI, and create the control when the page loads:

// add a FlexGrid to the page
var flex = new wijmo.grid.FlexGrid('#gridId');
// add a GroupPanel to enable grouping on the grid
var panel = new wijmo.grouppanel.GroupPanel('#panelId', { grid: flex});

If you are using AngularJS, you can simply use the wj-group-panel directive:

<!-- create a FlexGrid with groups -->
<wj-group-panel
    grid="flex"
    placeholder="Drag columns here to create Groups"
    max-groups="4">
</wj-group-panel>
<wj-flex-grid
    control="flex" 
    items-source="data">
</wj-flex-grid>