Features

Format Cells

Format Cells

FlexSheet allows you to the format for each cell.

Features

Introduction
Data Binding
Sorting
Filtering
Format Cells
Multiple Headers
Cell Merging
Drag & Drop
Frozen Cells
Formulas
Custom Function
Table
Excel I/O
Server Load
Remote Load/Save
Excel Service

Format Cells

FlexSheet allows you to the format for each cell.
Format includes: data format of cell value (Date/Number format); font style;
fill color; and horizontal alignment.

Format:

Font:
Alignment:
Color:
0
1
2
3
4
5
6
7
  • Number
  • Date
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexSheetExplorer.Models;
 
namespace FlexSheetExplorer.Controllers
{
    public partial class FlexSheetController : Controller
    {
        public ActionResult FormatCells()
        {
            ViewBag.FontList = FontName.GetFontNameList();
            ViewBag.FontSizeList = FontSize.GetFontSizeList();
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
@{
    IEnumerable<FontName> fontList = ViewBag.FontList;
    IEnumerable<FontSize> fontSizeList = ViewBag.FontSizeList;
}
@section Scripts{
<script type="text/javascript" src="~/Scripts/FlexSheet/formatCells.js"></script>
}
 
<div>
    <div class="copy">
<h3>@Html.Raw(Resources.FlexSheet.FormatCells_Text2)</h3>
 
<p>@Html.Raw(Resources.FlexSheet.FormatCells_Text0)</p>
 
    </div>
    <div class="row well well-lg">
        <div class="row">
            @Html.Raw(Resources.FlexSheet.FormatCells_Text3)
            @(Html.C1().Menu().Header("Format").Id("menuFormat")
                .OnClientSelectedIndexChanged("formatChanged")
                .MenuItems(items =>
                {
                    items.Add("Decimal Format", "d0");
                    items.Add("Number Format", "n2");
                    items.Add("Percentage Format", "p2");
                    items.Add("Currency Format", "c2");
                    items.AddSeparator();
                    items.Add("Short Date", "d");
                    items.Add("Long Date", "D");
                    items.Add("Full Date/TIme (short time)", "f");
                    items.Add("Full Date/TIme (long time)", "F");
                }))
        </div>
        <br />
        <div class="row">
            @Html.Raw(Resources.FlexSheet.FormatCells_Text4)
            @(Html.C1().ComboBox<FontName>().Bind(fontList).SelectedIndex(0)
            .DisplayMemberPath("Name").SelectedValuePath("Value")
            .IsEditable(false).CssStyle("width", "120px")
            .OnClientSelectedIndexChanged("fontChanged")
            .Id("cboFontName")
            )
            @(Html.C1().ComboBox<FontSize>().Bind(fontSizeList).SelectedIndex(5)
            .DisplayMemberPath("Name").SelectedValuePath("Value")
            .IsEditable(false).CssStyle("width", "80px")
            .OnClientSelectedIndexChanged("fontSizeChanged")
            .Id("cboFontSize")
            )
            <div class="btn-group">
                <button type="button" id="boldBtn" class="btn btn-default" onclick="applyBoldStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text7)</button>
                <button type="button" id="italicBtn" class="btn btn-default" onclick="applyItalicStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text8)</button>
                <button type="button" id="underlineBtn" class="btn btn-default" onclick="applyUnderlineStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text9)</button>
            </div>
            @Html.Raw(Resources.FlexSheet.FormatCells_Text5)
            <div class="btn-group">
                <button type="button" id="leftBtn" class="btn btn-default active" onclick="applyCellTextAlign('left')">@Html.Raw(Resources.FlexSheet.FormatCells_Text10)</button>
                <button type="button" id="centerBtn" class="btn btn-default" onclick="applyCellTextAlign('center')">@Html.Raw(Resources.FlexSheet.FormatCells_Text11)</button>
                <button type="button" id="rightBtn" class="btn btn-default" onclick="applyCellTextAlign('right')">@Html.Raw(Resources.FlexSheet.FormatCells_Text12)</button>
            </div>
            @Html.Raw(Resources.FlexSheet.FormatCells_Text6)
            <div class="btn-group">
                <button type="button" class="btn btn-default" onclick="showColorPicker(event, false)">@Html.Raw(Resources.FlexSheet.FormatCells_Text13)</button>
                <button type="button" class="btn btn-default" onclick="showColorPicker(event, true)">@Html.Raw(Resources.FlexSheet.FormatCells_Text14)</button>
            </div>
        </div>
    </div>
    <div>
        @(Html.C1().FlexSheet().CssClass("flexSheet").Id("formatSheet")
        .AddUnboundSheet("Number", 20, 8)
        .AddUnboundSheet("Date", 20, 8))
 
        @(Html.C1().ColorPicker().Id("colorPicker").CssStyles(new Dictionary<string, string> {
                {"display","none"},{"position","fixed"},{"z-index","100" }
            }))
    </div>
</div>
@section Summary{
<p>@Html.Raw(Resources.FlexSheet.FormatCells_Text1)</p>
 
}