<div>
    <div class="copy">
        <h3>
            Grouping
        </h3>
        <p>
            This sample shows grouping support in the
            <a href="http://wijmo.com/5/docs/topic/wijmo.grid.FlexGrid.Class.html"
               target="_blank">FlexGrid</a>. Most of the work is done by the
            <a href="http://wijmo.com/5/docs/topic/wijmo.collections.CollectionView.Class.html"
               target="_blank">CollectionView</a> class used as a data source for the grid.
            To add grouping, add one or more
            <a href="http://wijmo.com/5/docs/topic/wijmo.collections.GroupDescription.Class.html"
               target="_blank">GroupDescription</a> objects to the
            <b>CollectionView.groupDescriptions</b> property, exactly as you would do in .NET,
            and ensure that the grid's <b>showGroups</b> property is set to true.
        </p>
        <p>
            You can customize the text that is displayed in group header rows using the grid's
            <b>groupHeaderFormat</b> property. By default, this displays the name of the group, for
            example, Country, followed by the current group and the number of items in the group.
            Use the <b>format</b> property on each
            <a href="http://wijmo.com/5/docs/topic/wijmo.grid.Column.Class.html"
               target="_blank">Column</a> object to format aggregated data displayed in the
            group header for that column. Notice how we use the column's <b>aggregate</b>
            property to specify how to aggregate the data for each column.
        </p>
        <p>
            This sample uses the
            <a no-href="http://wijmo.com/5/docs/topic/wijmo.angular2.WjFlexGrid.Class.html"
               target="_blank">WjFlexGrid</a>,
            <a no-href="http://wijmo.com/5/docs/topic/wijmo.angular2.WjFlexGridColumn.Class.html"
               target="_blank">WjFlexGridColumn</a>, and
            <a no-href="http://wijmo.com/5/docs/topic/wijmo.angular2.WjCollectionViewNavigator.Class.html"
               target="_blank">WjCollectionViewNavigator</a> components for Angular 2.
        </p>
    </div>
    <!-- commands -->
    <div class="container-fluid">
        <div class="row well app-filter">
            <div class="col-sm-6 col-xs-12 app-nopad">
                <!-- grouping -->
                <wj-menu [(value)]="groupBy" [header]="'Group by'">
                    <wj-menu-item [value]="''">(no grouping)</wj-menu-item>
                    <wj-menu-item [value]="'Country'">Country</wj-menu-item>
                    <wj-menu-item [value]="'Product'">Product</wj-menu-item>
                    <wj-menu-item [value]="'Country/Product'">Country and Product</wj-menu-item>
                    <wj-menu-item [value]="'Product/Country'">Product and Country</wj-menu-item>
                    <wj-menu-item [value]="'Product/Country/Amount'">Product, Country and Amount</wj-menu-item>
                </wj-menu>
                <!-- culture -->
                <wj-menu [(value)]="culture" [header]="'Culture'" [maxDropDownHeight]="200">
                    <wj-menu-item [value]="'ar-AE'">Arabic (U.A.E.)</wj-menu-item>
                    <wj-menu-item [value]="'eu'">Basque</wj-menu-item>
                    <wj-menu-item [value]="'bg'">Bulgarian</wj-menu-item>
                    <wj-menu-item [value]="'ca'">Catalan</wj-menu-item>
                    <wj-menu-item [value]="'zh'">Chinese</wj-menu-item>
                    <wj-menu-item [value]="'zh-HK'">Chinese (Traditional, Hong Kong SAR)</wj-menu-item>
                    <wj-menu-item [value]="'zh-TW'">Chinese (Traditional, Taiwan)</wj-menu-item>
                    <wj-menu-item [value]="'hr'">Croatian</wj-menu-item>
                    <wj-menu-item [value]="'cs'">Czech</wj-menu-item>
                    <wj-menu-item [value]="'da'">Danish</wj-menu-item>
                    <wj-menu-item [value]="'nl'">Dutch</wj-menu-item>
                    <wj-menu-item [value]="'en'">English</wj-menu-item>
                    <wj-menu-item [value]="'en-GB'">English (United Kingdom)</wj-menu-item>
                    <wj-menu-item [value]="'et'">Estonian</wj-menu-item>
                    <wj-menu-item [value]="'fi'">Finnish</wj-menu-item>
                    <wj-menu-item [value]="'fr'">French</wj-menu-item>
                    <wj-menu-item [value]="'fr-CA'">French (Canada)</wj-menu-item>
                    <wj-menu-item [value]="'gl'">Galician</wj-menu-item>
                    <wj-menu-item [value]="'de'">German</wj-menu-item>
                    <wj-menu-item [value]="'el'">Greek</wj-menu-item>
                    <wj-menu-item [value]="'he'">Hebrew</wj-menu-item>
                    <wj-menu-item [value]="'hi'">Hindi</wj-menu-item>
                    <wj-menu-item [value]="'hu'">Hungarian</wj-menu-item>
                    <wj-menu-item [value]="'id'">Indonesian</wj-menu-item>
                    <wj-menu-item [value]="'it'">Italian</wj-menu-item>
                    <wj-menu-item [value]="'ja'">Japanese</wj-menu-item>
                    <wj-menu-item [value]="'kk'">Kazakh</wj-menu-item>
                    <wj-menu-item [value]="'ko'">Korean</wj-menu-item>
                    <wj-menu-item [value]="'lv'">Latvian</wj-menu-item>
                    <wj-menu-item [value]="'lt'">Lithuanian</wj-menu-item>
                    <wj-menu-item [value]="'no'">Norwegian</wj-menu-item>
                    <wj-menu-item [value]="'pl'">Polish</wj-menu-item>
                    <wj-menu-item [value]="'pt'">Portuguese</wj-menu-item>
                    <wj-menu-item [value]="'ro'">Romanian</wj-menu-item>
                    <wj-menu-item [value]="'ru'">Russian</wj-menu-item>
                    <wj-menu-item [value]="'sr'">Serbian</wj-menu-item>
                    <wj-menu-item [value]="'sk'">Slovak</wj-menu-item>
                    <wj-menu-item [value]="'sl'">Slovenian</wj-menu-item>
                    <wj-menu-item [value]="'sv'">Swedish</wj-menu-item>
                    <wj-menu-item [value]="'th'">Thai</wj-menu-item>
                    <wj-menu-item [value]="'tr'">Turkish</wj-menu-item>
                    <wj-menu-item [value]="'uk'">Ukrainian</wj-menu-item>
                </wj-menu>
            </div>
            <div class="col-sm-6 col-xs-12 app-nopad">
                <!-- data size -->
                <wj-menu [(value)]="itemCount" [header]="'Data Size'">
                    <wj-menu-item [value]="5">5</wj-menu-item>
                    <wj-menu-item [value]="50">50</wj-menu-item>
                    <wj-menu-item [value]="500">500</wj-menu-item>
                    <wj-menu-item [value]="5000">5,000</wj-menu-item>
                    <wj-menu-item [value]="50000">50,000</wj-menu-item>
                    <wj-menu-item [value]="100000">100,000</wj-menu-item>
                    <wj-menu-item [value]="500000">500,000</wj-menu-item>
                    <wj-menu-item [value]="1000000">1,000,000</wj-menu-item>
                </wj-menu>
                <!-- navigator -->
                <wj-collection-view-navigator [cv]="flex?.collectionView">
                </wj-collection-view-navigator>
            </div>
        </div>
    </div>
    <!-- the grid -->
    <div>

        <!-- the grid -->
        <wj-flex-grid #flex
                      class="grid"
                      [itemsSource]="data"
                      [allowAddNew]="true"
                      [allowDelete]="true"
                      (itemsSourceChanged)="itemsSourceChangedHandler()">
            <wj-flex-grid-column [header]="'ID'" [binding]="'id'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Product'" [binding]="'product'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Color'" [binding]="'color'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Amount'" [binding]="'amount'" [format]="'n0'" [aggregate]="'Sum'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Pending'" [binding]="'amount2'" [format]="'n0'" [aggregate]="'Sum'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Discount'" [binding]="'discount'" [format]="'p0'" [aggregate]="'Avg'"></wj-flex-grid-column>
        </wj-flex-grid>

        <!-- show the current item too -->
        <h4>Current Item</h4>
        <dl class="dl-horizontal current-item">
            <dt>ID</dt>
            <dd>{{flex.collectionView.currentItem?.id}}</dd>
            <dt>Country</dt>
            <dd>{{flex.collectionView.currentItem?.country}}</dd>
            <dt>Product</dt>
            <dd>{{flex.collectionView.currentItem?.product}}</dd>
            <dt>Color</dt>
            <dd>{{flex.collectionView.currentItem?.color}}</dd>
            <dt>Amount</dt>
            <dd>{{flex.collectionView.currentItem?.amount | number:'1.2-2'}}</dd>
        </dl>
    </div>
</div>
