Features

Introduction

Introduction

The FlexSheet control extends the FlexGrid control and provides an Excel-like functionality.

Features

Introduction

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.

Note: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.

FlexSheet provides following Excel-like features:

Multiple Sheets
Include multiple separated sheets in a single worksheet.
Formulas
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.
Cell Style
Cell-styling support includes format, font, horizontal alignment, fore color, fill color and more.
Merge Cells
User can merge any cells, in contrast with FlexGrid, which only supports content-driven cell merging.
Undo/Redo
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.
Drag & Drop
Drag and drop rows/columns for moving and copying.
Select whole column
Select the whole column by clicking the column header.
Allow Auto Fill
Auto fill cells with data that follows a pattern by dragging the bottom right corner of the cell.

using Microsoft.AspNetCore.Mvc;

namespace FlexSheetExplorer.Controllers
{
    public partial class FlexSheetController : Controller
    {
        public ActionResult Intro()
        {
            return View();
        }
    }
}

<div>
    <div class="copy">
        <h3>
            @Html.Raw(FlexSheetRes.Intro_Text4)
        </h3>
        <p>@Html.Raw(FlexSheetRes.Intro_Text0)</p>

        <div class="collapsed-content collapse">
            <p>@Html.Raw(FlexSheetRes.Intro_Text1)</p>

            <dl class="dl-horizontal">
                <dt>@Html.Raw(FlexSheetRes.Intro_Text5)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text6)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text7)</dt>
                <dd>
                    @Html.Raw(FlexSheetRes.Intro_Text8)
                </dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text9)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text10)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text11)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text12)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text13)</dt>
                <dd>
                    @Html.Raw(FlexSheetRes.Intro_Text14)
                </dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text15)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text16)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text17)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text18)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text20)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text21)</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">
                @Html.Raw(FlexSheetRes.Intro_Text2)
            </button>
        </p>
    </div>
    <div>
        <c1-flex-sheet class="flexSheet" allow-auto-fill="true">
            <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>@Html.Raw(FlexSheetRes.Intro_Text3)</p>

}