@model IEnumerable<Sale>
@section Styles{
<style>
    .header {
        background-color: #fffcea;
        border-bottom: 1px solid black;
        margin-bottom: 12pt;
    }

    /* style for footer rows */
    .wj-group.wj-footer {
        background-color: rgb(242, 241, 225);
    }

    /* add border around the compound grid */
    .multi-grid {
        border: 2px solid grey;
        border-radius: 4px;
    }

        /* remove spacing between master and footer grids*/
        /* http://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element */
        .multi-grid .wj-flexgrid {
            vertical-align: top;
        }
</style>
}

@section Scripts{
<script>
    var ROW_FOOTER_CLASS = 'wj-footer';

    function showGridFooter(footerSelector, masterSelector) {

        // get control instance, assert type
        var flex = wijmo.Control.getControl(footerSelector);
        flex = wijmo.asType(flex, wijmo.grid.FlexGrid);

        // get master grid that controls this footer grid
        var masterFlex = wijmo.Control.getControl(masterSelector);
        wijmo.assert(flex && masterFlex && flex != masterFlex, 'bad parameters');

        // configure footer grid
        flex.isReadOnly = true;
        flex.selectionMode = wijmo.grid.SelectionMode.None;
        flex.headersVisibility = masterFlex.headersVisibility;
        flex.columnHeaders.rows.clear();
        var row = new wijmo.grid.Row();
        row.cssClass = 'wj-footer-grid';
        flex.rows.push(row);

        // remove scrollbars from footer grid
        var root = flex.hostElement.querySelector('[wj-part="root"]');
        root.style.overflow = 'hidden';

        // synchronize columns with master grid
        var extraCol = new wijmo.grid.Column();
        masterFlex.draggedColumn.addHandler(syncCols);
        masterFlex.resizedColumn.addHandler(syncCols);
        masterFlex.columns.collectionChanged.addHandler(syncCols);
        function syncCols() {

            // copy columns/sizes etc
            flex.columnLayout = masterFlex.columnLayout;
            flex.columns.push(extraCol);

            // set content of footer grid
            for (var i = 0; i < masterFlex.columns.length; i++) {
                var col = masterFlex.columns[i];
                var data = col.header ? col.header : col.binding;
                flex.setCellData(0, i, 'f(' + data + ')', false);
            }
        }
        syncCols();

        // synchronize scroll position with master grid
        masterFlex.scrollPositionChanged.addHandler(function () {
            flex.scrollPosition = masterFlex.scrollPosition;
        });
    }

    function showGroupFooter(masterSelector) {

        // get control instance, assert type
        var flex = wijmo.Control.getControl(masterSelector);
        flex = wijmo.asType(flex, wijmo.grid.FlexGrid);

        // when rows collection changes, update groups below
        var updating = false;
        flex.rows.collectionChanged.addHandler(function () {
            if (!updating && flex.collectionView.groupDescriptions.length) {
                updating = true;
                addGroupFooters();
                updating = false;
            }
        });

        // add group footers
        function addGroupFooters() {
            flex.beginUpdate();
            for (var r = 0; r < flex.rows.length; r++) {
                var row = flex.rows[r];
                if (row instanceof wijmo.grid.GroupRow && row.cssClass != ROW_FOOTER_CLASS) {

                    // create footer row to match this group row
                    var newRow = new wijmo.grid.GroupRow();
                    newRow.level = row.level;
                    newRow.cssClass = ROW_FOOTER_CLASS;

                    // add footer row to the grid
                    var index = findFooterIndex(r);
                    flex.rows.insert(index, newRow);

                    // add some content to footer row
                    var group = row.dataItem;
                    flex.setCellData(index, 0, 'f(' + group.name + ')', false);
                }
            }
            flex.endUpdate();
        }

        // find the index where the group footer should be inserted
        function findFooterIndex(r) {
            var level = flex.rows[r].level;
            for (var i = r + 1; i < flex.rows.length; i++) {
                var row = flex.rows[i];
                if (row instanceof wijmo.grid.GroupRow) {

                    // if this is *not* a footer and the level is <=, insert here
                    if (row.cssClass != ROW_FOOTER_CLASS && row.level <= level) {
                        return i;
                    }

                    // if this *is* a footer and the level is <, insert here
                    if (row.cssClass == ROW_FOOTER_CLASS && row.level < level) {
                        return i;
                    }
                }
            }

            // insert at the bottom
            return flex.rows.length;
        }
    }

    function grouping(groupBy) {
        var flex = wijmo.Control.getControl("#grid"), data = flex.collectionView;
        flex.beginUpdate();
        data.groupDescriptions.clear();
        var groups = groupBy ? groupBy.split(',') : [];
        for (var i = 0; i < groups.length; i++) {
            data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription(groups[i]));
        }
        flex.endUpdate();
    }

    c1.documentReady(function () {
        showGridFooter("#footerGrid", "#grid");
        showGroupFooter("#grid");
    });
</script>
}

<label>Select how to group the data</label>
<div class="wj-btn-group">
    <button type="button" class="wj-btn wj-btn-default" onclick="grouping('')">None</button>
    <button type="button" class="wj-btn wj-btn-default" onclick="grouping('Country')">Country</button>
    <button type="button" class="wj-btn wj-btn-default" onclick="grouping('Product')">Product</button>
    <button type="button" class="wj-btn wj-btn-default" onclick="grouping('Product,Color')">Product and Color</button>
</div>

<label>See and edit the data here</label>
<div class="multi-grid">
    <c1-flex-grid id="grid" is-read-only="true" auto-generate-columns="false" 
                  show-groups="true" class="grid">
        <c1-items-source disable-server-read="true" read-action-url="@Url.Action("CustomFooters_Bind")"></c1-items-source>
        <c1-flex-grid-column binding="ID" width="70"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Start"></c1-flex-grid-column>
        <c1-flex-grid-column binding="End"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Discount" width="100" format="p0"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Active" width="80"></c1-flex-grid-column>
    </c1-flex-grid>
    <c1-flex-grid id="footerGrid"></c1-flex-grid>
</div>

@section Description{
    <p>
        This sample shows how to extend FlexGrid to provide two types of footer
        elements:
    </p>
    <ol>
        <li>
            <b>Group Footer Rows</b>: When grouping is enabled, FlexGrid adds
            group rows above each group. This sample shows how you can add custom
            group rows below each group as well.
            Group footer rows are implemented using a method called
            <b>showGroupFooter</b> which you can add to any FlexGrid.
        </li>
        <li>
            <b>Footer Grid</b>: In some situations you may want to display a
            non-scrollable row below the grid to show summary information such as
            subtotals. This sample shows how you can accomplish this using a
            separate but synchronized grid with a single row.
            The grid footer is implemented as a method called
            <b>showGridFooter</b> which you can add to a FlexGrid to have it
            act as a footer for another FlexGrid.
        </li>
    </ol>
}
