# 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.grid.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>