<div class="header-panel member">
<h2><span class="identifier">wjGroupPanel</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.knockout.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.knockout.Module.html"><span class="identifier">wijmo.knockout</span></a></dd>
<dt>Show</dt>
<dd>
<label><input type="checkbox" ng-model="ctx.showInherited"> Inherited Members</label>&nbsp;&nbsp;&nbsp;
<label><input type="checkbox" ng-model="ctx.showRaisers"> Event Raisers</label>
</dd>
</dl>
<div class="comment"><p>KnockoutJS binding for the <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> <a href="topic/wijmo.grid.grouppanel.GroupPanel.Class.html"><span class="identifier">GroupPanel</span></a> control.</p>
<p>The <b>wjGroupPanel</b> binding should be connected to the <b>FlexGrid</b> control using the <b>grid</b> property. 
For example:</p>


<pre>&lt;p&gt;Here is a FlexGrid control with GroupPanel:&lt;/p&gt;
&nbsp;
&lt;div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns here to create groups.' }"&gt;&lt;/div&gt;
&nbsp;
&lt;div data-bind="wjFlexGrid: { control: flex, itemsSource: data }"&gt;
    &lt;div data-bind="wjFlexGridColumn: { 
        header: 'Country', 
        binding: 'country', 
        width: '*' }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjFlexGridColumn: { 
        header: 'Date', 
        binding: 'date' }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjFlexGridColumn: { 
        header: 'Revenue', 
        binding: 'amount', 
        format: 'n0' }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjFlexGridColumn: { 
        header: 'Active', 
        binding: 'active' }"&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
<p>The <b>wjGroupPanel</b> binding supports all read-write properties and events of 
the <a href="topic/wijmo.grid.grouppanel.GroupPanel.Class.html"><span class="identifier">GroupPanel</span></a> class.</p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
</div>
