<div>
    <div class="copy">
        <h3>
            Introduction</h3>
        <p>
            This view shows the <a href="http://wijmo.com/5/docs/topic/wijmo.grid.FlexGrid.Class.html" 
            target="_blank">FlexGrid</a> control's basic features. It binds the grid to a data source
            and has menus below that allow you to select the number of data items, the <a 
            href="http://wijmo.com/5/docs/topic/wijmo.grid.SelectionMode.Enum.html" target="_blank">
            selection mode</a>, and the <a href="http://wijmo.com/5/docs/static/globalization.html" 
            target="_blank">culture</a>, and whether to use <a 
            href="http://wijmo.com/5/docs/topic/wijmo.grid.DataMap.Class.html" target="_blank">data 
            mapping</a> and formatting. Notice how the grid remains fast and fluid even with large 
            numbers of data items. FlexGrid achieves this level of performance by automatically 
            virtualizing rows and columns.</p>

        <div class="collapsed-content collapse">
            <p>
                You can select cells and ranges with the keyboard and the mouse. The current selection
                is updated on the screen automatically. Use the Selection menu below to try out the 
                various selection modes. Note that the ListBox mode allows you to select non-contiguous
                rows.</p>
            <p>
                You can resize and move columns by dragging with the mouse, and auto-size columns by
                double-clicking the right edges of column headers. If you press the control key while 
                resizing a selected column, all selected columns are resized.</p>
            <p>
                You can sort columns by clicking their headers. Press the control key when you
                click the column header to remove the sort.</p>
            <p>
                The filter and navigation bars above the grid allow you to filter and navigate through
                the data. Both are implemented using the 
                <a href="http://wijmo.com/5/docs/topic/wijmo.collections.ICollectionView.Interface.html"
                target="_blank">ICollectionView</a> interface, as you would do in C# and .NET.</p>
            <p>
                Notice that unlike the standard AngularJS search filter, this one supports multi-term
                searches, so if you type <b>us gad red</b>, the grid shows items that contain
                <b>all</b> of these terms (country is 'US,' product is 'Gadget,' and color is 'red').</p>
            <p>
                The navigation bar is created using the <a 
                href="http://wijmo.com/5/docs/topic/wijmo.angular.WjCollectionViewNavigator.Class.html" 
                target="_blank">wj-collection-view-navigator</a> directive, and the grid is created using the 
                <a href="http://wijmo.com/5/docs/topic/wijmo.angular.WjFlexGrid.Class.html" 
                target="_blank">wj-flex-grid</a> directive and AngularJS.</p>
            <p>
                The buttons at the bottom demonstrate the <a 
                href="http://wijmo.com/5/docs/topic/wijmo.grid.RowCol.Class.html" target="_blank">column and 
                row</a> isVisible property, and the column width and row height properties, as well as the 
                <a href="http://wijmo.com/5/docs/topic/wijmo.grid.FlexGrid.Class.html" target="_blank">FlexGrid</a> 
                scrollPosition property.</p>
        </div>
        <p>
            <button 
                type="button" 
                data-toggle="collapse"
                data-target=".collapsed-content, .btn.btn-default.btn-xs.collapse"
                class="btn btn-default btn-xs collapse in">
                Read more
            </button>
        </p>
    </div>

    <div>

        <!-- search box -->
        <div class="row">
            <div class="col-md-4 col-md-offset-0 col-xs-10 col-xs-offset-1">
                <input type="text" class="form-control app-pad" placeholder="Filter" ng-model="ctx.filter" />
            </div>
            <div class="col-md-5 col-md-offset-3 col-xs-10 col-xs-offset-1">
                <wj-collection-view-navigator cv="ctx.flex.collectionView" class="pull-right" />
            </div>
        </div>

        <!-- the grid -->
        <wj-flex-grid
            class="grid"
            control="ctx.flex"
            allow-resizing="Both"
            items-source="ctx.data"
            items-source-changed="itemsSourceChangedHandler()">
        </wj-flex-grid>
    </div>

    <!-- commands -->
    <div class="well">
        <div class="grid-sort-group">

            <!-- current selection -->
            <p>Selection: <b>{{ctx.flex.selection | cellRange}}</b></p>

            <!-- data size -->
            <wj-menu value="ctx.itemCount" header="Items">
                <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>

            <!-- allow add new -->
            <wj-menu value="ctx.flex.allowAddNew" header="Allow Add">
                <wj-menu-item value="true">Yes</wj-menu-item>
                <wj-menu-item value="false">No</wj-menu-item>
            </wj-menu>

            <!-- selection mode -->
            <wj-menu value="ctx.flex.selectionMode" header="Selection">
                <wj-menu-item value="0">None</wj-menu-item>
                <wj-menu-item value="1">Cell</wj-menu-item>
                <wj-menu-item value="2">CellRange</wj-menu-item>
                <wj-menu-item value="3">Row</wj-menu-item>
                <wj-menu-item value="4">RowRange</wj-menu-item>
                <wj-menu-item value="5">ListBox</wj-menu-item>
            </wj-menu>

            <!-- headers visibility -->
            <wj-menu value="ctx.flex.headersVisibility" header="Headers Visibility">
                <wj-menu-item value="0">None</wj-menu-item>
                <wj-menu-item value="1">Column</wj-menu-item>
                <wj-menu-item value="2">Row</wj-menu-item>
                <wj-menu-item value="3">All</wj-menu-item>
            </wj-menu>

            <!-- highlight headers -->
            <wj-menu value="ctx.flex.showSelectedHeaders" header="Show Selected Headers">
                <wj-menu-item value="0">None</wj-menu-item>
                <wj-menu-item value="1">Column</wj-menu-item>
                <wj-menu-item value="2">Row</wj-menu-item>
                <wj-menu-item value="3">All</wj-menu-item>
            </wj-menu>

            <!-- show marquee -->
            <wj-menu value="ctx.flex.showMarquee" header="Show Marquee">
                <wj-menu-item value="true">On</wj-menu-item>
                <wj-menu-item value="false">Off</wj-menu-item>
            </wj-menu>

            <!-- data maps -->
            <wj-menu value="ctx.dataMaps" header="Data Maps">
                <wj-menu-item value="true">On</wj-menu-item>
                <wj-menu-item value="false">Off</wj-menu-item>
            </wj-menu>

            <!-- formatting -->
            <wj-menu value="ctx.formatting" header="Formatting">
                <wj-menu-item value="true">On</wj-menu-item>
                <wj-menu-item value="false">Off</wj-menu-item>
            </wj-menu>

            <!-- culture -->
            <wj-menu value="ctx.culture" header="Culture">
                <wj-menu-item value="'en'">English</wj-menu-item>
                <wj-menu-item value="'de'">German</wj-menu-item>
                <wj-menu-item value="'it'">Italian</wj-menu-item>
                <wj-menu-item value="'fr'">French</wj-menu-item>
                <wj-menu-item value="'pt'">Portuguese</wj-menu-item>
                <wj-menu-item value="'ru'">Russian</wj-menu-item>
                <wj-menu-item value="'ja'">Japanese</wj-menu-item>
                <wj-menu-item value="'ko'">Korean</wj-menu-item>
            </wj-menu>

            <br />
            <br />

            <!-- testing the object model -->
            <button class="btn btn-default" ng-click="toggleColumnVisibility()">
                Show/Hide Column
            </button>
            <button class="btn btn-default" ng-click="changeColumnSize()">
                Resize Column
            </button>
            <button class="btn btn-default" ng-click="toggleRowVisibility()">
                Show/Hide Row
            </button>
            <button class="btn btn-default" ng-click="changeRowSize()">
                Resize Row
            </button>
            <button class="btn btn-default" ng-click="changeDefaultRowSize()">
                Default Row Size
            </button>
            <button class="btn btn-default" ng-click="changeScrollPosition()">
                Scroll Position
            </button>
        </div>
    </div>
</div>
