<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>
        @(Html.C1().FlexSheet().CssClass("flexSheet")
        .AddUnboundSheet("Sheet1", 25, 12)
        .AddUnboundSheet("Sheet2", 25, 12))
    </div>
</div>
@section Summary{
    <p>
        The FlexSheet control extends the FlexGrid control and provides an Excel-like functionality.
    </p>
}