The wj-group-panel directive connects to the FlexGrid control via the grid property. For example:

<p>Here is a FlexGrid control with GroupPanel:</p>
 
<wj-group-panel grid="flex" placeholder="Drag columns here to create groups."></wj-group-panel>
 
<wj-flex-grid control="flex" items-source="data">
  <wj-flex-grid-column
    header="Country"
    binding="country">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Sales"
    binding="sales">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Expenses"
    binding="expenses">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Downloads"
    binding="downloads">
  </wj-flex-grid-column>
</wj-flex-grid>

The wj-group-panel directive supports the following attributes:

grid

@The FlexGrid that is connected to this GroupPanel.

hide-grouped-columns

@A value indicating whether the panel hides grouped columns in the owner grid.

max-groups

@The maximum number of groups allowed.

placeholder

@A string to display in the control when it contains no groups.

got-focus

& Handler for the GroupPanel.gotFocus event.

lost-focus

& Handler for the GroupPanel.lostFocus event.