# Wijmo_Angular_Grid_Grouppanel.Wjgrouppanel

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								WjGroupPanel Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>AngularJS directive for the <a href="wijmo_grid_grouppanel.grouppanel.html">GroupPanel</a> control.</p>
								</div>
								<p>The <b>wj-group-panel</b> directive connects to the <b>FlexGrid</b> control via the <b>grid</b> property.
								For example:</p>
								<pre>&lt;p&gt;Here is a FlexGrid control with GroupPanel:&lt;/p&gt;
&nbsp;
&lt;wj-group-panel grid="flex" placeholder="Drag columns here to create groups."&gt;&lt;/wj-group-panel&gt;
&nbsp;
&lt;wj-flex-grid control="flex" items-source="data"&gt;
  &lt;wj-flex-grid-column
    header="Country"
    binding="country"&gt;
  &lt;/wj-flex-grid-column&gt;
  &lt;wj-flex-grid-column
    header="Sales"
    binding="sales"&gt;
  &lt;/wj-flex-grid-column&gt;
  &lt;wj-flex-grid-column
    header="Expenses"
    binding="expenses"&gt;
  &lt;/wj-flex-grid-column&gt;
  &lt;wj-flex-grid-column
    header="Downloads"
    binding="downloads"&gt;
  &lt;/wj-flex-grid-column&gt;
&lt;/wj-flex-grid&gt;</pre>
								<p>The <b>wj-group-panel</b> directive supports the following attributes:</p>
								<dl class="dl-horizontal">
									<dt>grid</dt>                      <dd><code>@</code>The <b>FlexGrid</b> that is connected to this <b>GroupPanel</b>.</dd>
									<dt>hide-grouped-columns</dt>      <dd><code>@</code>A value indicating whether the panel hides grouped columns
									in the owner grid.</dd>
									<dt>max-groups</dt>                <dd><code>@</code>The maximum number of groups allowed.</dd>
									<dt>placeholder</dt>               <dd><code>@</code>A string to display in the control when it
									contains no groups.</dd>
									<dt>got-focus</dt>                 <dd><code>&amp;</code> Handler for the <a href="wijmo_grid_grouppanel.grouppanel.html#gotfocus">GroupPanel.gotFocus</a> event.</dd>
									<dt>lost-focus</dt>                <dd><code>&amp;</code> Handler for the <a href="wijmo_grid_grouppanel.grouppanel.html#lostfocus">GroupPanel.lostFocus</a> event.</dd>
								</dl>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="tsd-signature-type">WjDirective</span>
									<ul class="tsd-hierarchy">
										<li>
											<span class="target">WjGroupPanel</span>
										</li>
									</ul>
								</li>
							</ul>
						</section>
					</div>