Drag and Drop Grouping with GroupPanel

The wijmo.grid.grouppanel module provides a GroupPanel control that adds an Outlook-style grouping UI to the grid.

To use the GroupPanel control, drag column headers into the panel to create the groups. You may also drag the groups into new positions or remove groups.

First we create a FlexGrid:

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridGroupPanel from '@mescius/wijmo.grid.grouppanel';

  // create group panel grid
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: data
  });

Then, we create a GroupPanel and pass in a reference to the FlexGrid insance:

// create the group panel and pass in the grid
var theGroupPanel = new wjGridGroupPanel.GroupPanel('#theGroupPanel', {
    placeholder: 'Drag columns here to create groups',
    grid: theGrid
});

The GroupPanel control supports the following keyboard commands: