# wjGroupPanel Class ## Content

wjGroupPanel Class

KnockoutJS binding for the FlexGrid GroupPanel control.

The wjGroupPanel binding should be connected to the FlexGrid control using the grid property. For example:

<p>Here is a FlexGrid control with GroupPanel:</p>
 
<div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns here to create groups.' }"></div>
 
<div data-bind="wjFlexGrid: { control: flex, itemsSource: data }">
    <div data-bind="wjFlexGridColumn: {
        header: 'Country',
        binding: 'country',
        width: '*' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Date',
        binding: 'date' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Revenue',
        binding: 'amount',
        format: 'n0' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Active',
        binding: 'active' }">
    </div>
</div>

The wjGroupPanel binding supports all read-write properties and events of the GroupPanel class.

Heirarchy