<div>
    <div class="copy">
        <h3>
            Introduction
        </h3>
        <p>
            The FlexSheet control extends the FlexGrid control and provides an Excel-like functionality.
            FlexSheet supports all the FlexGrid's features, and focuses on the key features from Excel not included in FlexGrid.<br />
            <b>Note:</b>FlexSheet requires the JSZip library for loading and saving xlsx file, you should add jszip.js via CDN or include the script file in the project.
        </p>
        <div class="collapsed-content collapse">
            <p>
                FlexSheet provides following Excel-like features:
            </p>
            <dl class="dl-horizontal">
                <dt>Multiple Sheets</dt>
                <dd>Include multiple separated sheets in a single worksheet.</dd>
                <dt>Formulas</dt>
                <dd>
                    Calculation engine includes built-in formula support,
                    complete with nearly 100 formulas and auto-completion.
                    Our formula operations were built to align with Microsoft Excel,
                    including operations for aggregation, mathematics, logic and text.
                </dd>
                <dt>Cell Style</dt>
                <dd>Cell-styling support includes format, font, horizontal alignment, fore color, fill color and more.</dd>
                <dt>Merge Cells</dt>
                <dd>User can merge any cells, in contrast with FlexGrid, which only supports content-driven cell merging.</dd>
                <dt>Undo/Redo</dt>
                <dd>
                    Undo/redo mutiple operations include edit cell, insert/remove rows/columns,
                    apply cell style, merge cells, resize rows/columns, drag and drop rows/columns and more.
                </dd>
                <dt>Drag & Drop</dt>
                <dd>Drag and drop rows/columns for moving and copying.</dd>
                <dt>Select whole column</dt>
                <dd>Select the whole column by clicking the column header.</dd>
            </dl>
        </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>
        <c1-flex-sheet class="flexSheet">
            <c1-unbound-sheet column-count="12" row-count="25"></c1-unbound-sheet>
            <c1-unbound-sheet column-count="12" row-count="25"></c1-unbound-sheet>
        </c1-flex-sheet>
    </div>
</div>
@section Summary{
    <p>
        The FlexSheet control extends the FlexGrid control and provides an Excel-like functionality.
    </p>
}