5.20231.904
wijmo.angular.grid.grouppanel Class WjGroupPanel Wijmo API Class

WjGroupPanel Class

AngularJS directive for the GroupPanel control.

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.

Heirarchy

  • WjDirective
    • WjGroupPanel