デモアプリケーショントップ
ナビゲーション リンクのスキップ
 新機能 の展開 新機能
 InputMan連携 の展開 InputMan連携
 マルチタッチ機能 の展開 マルチタッチ機能
 セル、行、列、ヘッダ の展開 セル、行、列、ヘッダ
 シート の展開 シート
 スタイル の展開 スタイル
 選択 の展開 選択
 セル型 の展開 セル型
 編集 の展開 編集
 ソート の展開 ソート
 フィルタリング の展開 フィルタリング
 グループ化 の展開 グループ化
 ページング の展開 ページング
 スクロール の展開 スクロール
 データ連結 の展開 データ連結
 階層表示 の縮小 階層表示
 コマンドバー の展開 コマンドバー
 チャート の展開 チャート
 数式 の展開 数式
 インポート／エクスポート の展開 インポート／エクスポート
 クライアント側スクリプト の展開 クライアント側スクリプト

ノード形式

リレーショナルデータベースのデータなどを階層で表示することができます。
データの階層表示を設定するには、最初に、リレーショナル データを保持するデータセットを作成します。
次に、データ間の関係を定義してから、データが適切に表示されるようにコントロールを設定します。
階層表示では親階層（親ビュー）と子階層（子ビュー）はそれぞれが 独立したオブジェクト（シートビュー）として存在します。

展開ノードをクリックすると子階層を展開表示します。 子階層シートはChildViewCreatedイベントで定義することができます。
 製品ID製品種別製品名当年第１Ｑ当年第２Ｑ当年第３Ｑ当年第４Ｑ
1
10001乳製品酪農ミルク5,5005,0004,5006,000
2
20001清涼飲料水いよかんドリンク1,0003,0002,7002,700
3
20002清涼飲料水ぶどうジュース3,0003,5004,8004,800
4
20003清涼飲料水マンゴードリンク2,0001,0005001,050
5
30001ビール激辛ビール5,5008,0008,50010,000
6
30002ビールモルトビール3,0003,5002,7804,000
7
20004清涼飲料水ぶどうの街500300200700
8
30003ビールオリエントの村8,0009,5009,5809,000
9
40002焼酎吟醸 ほめごろし6,0007,0009,0009,500
10
40003焼酎大吟醸 オリエント1,0005,0006,0005,000
11
40005焼酎麦焼酎 ちこちこ1,0001,5001,2001,258
12
10002乳製品酪農ミルク（低脂肪）501202380456

ソースコード

別ウィンドウで表示 
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;
using System.Globalization;

public partial class hierarchicalview : System.Web.UI.Page
{
    DataSet myDataSet = new DataSet();

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack) return;

        // セル型の自動設定を無効化
        FpSpread1.ActiveSheetView.DataAutoCellTypes = false;

        // データ作成
        InitData();
        FpSpread1.DataSource = myDataSet;
        
        // SPREAD初期化
        InitSpread(FpSpread1.Sheets[0]);
    }

    private void InitSpread(FarPoint.Web.Spread.SheetView sheet)
    {

        // SPREAD設定
        FpSpread1.CommandBar.Visible = false;
        FpSpread1.CssClass = "spreadStyle";
        FpSpread1.UseClipboard = false;

        // フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%");

        // シート設定
        sheet.PageSize = sheet.RowCount;

        // 列幅の設定
        sheet.Columns[0].Width = 50;
        sheet.Columns[1].Width = 100;
        sheet.Columns[2].Width = 140;
        sheet.Columns[3].Width = 80;
        sheet.Columns[4].Width = 80;
        sheet.Columns[5].Width = 80;
        sheet.Columns[6].Width = 80;

        // 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle;

        FarPoint.Web.Spread.IntegerCellType ic = new FarPoint.Web.Spread.IntegerCellType();
        NumberFormatInfo ninfo 
            = (NumberFormatInfo)(CultureInfo.CurrentCulture.NumberFormat.Clone());
        ninfo.NumberGroupSizes = new int[] { 3 }; //整数部は３桁区切り
        ic.NumberFormat = ninfo;
        sheet.Cells[0, 3, sheet.RowCount - 1, 6].CellType = ic;
    }

    private void InitData()
    {
        System.Data.DataTable thisyear, lastyear;

        // 当年度データ
        thisyear = myDataSet.Tables.Add("thisyear");
        thisyear.Columns.AddRange(new DataColumn[] { new DataColumn("製品ID",Type.GetType("System.String")), 
                                                    new DataColumn("製品種別", Type.GetType("System.String")), 
                                                    new DataColumn("製品名", Type.GetType("System.String")), 
                                                    new DataColumn("当年第１Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("当年第２Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("当年第３Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("当年第４Ｑ", Type.GetType("System.Int32")) 
                                                    });

        thisyear.Rows.Add(new Object[] { "10001", "乳製品", "酪農ミルク", 5500, 5000, 4500, 6000 });
        thisyear.Rows.Add(new Object[] { "20001", "清涼飲料水", "いよかんドリンク", 1000, 3000, 2700, 2700 });
        thisyear.Rows.Add(new Object[] { "20002", "清涼飲料水", "ぶどうジュース", 3000, 3500, 4800, 4800 });
        thisyear.Rows.Add(new Object[] { "20003", "清涼飲料水", "マンゴードリンク", 2000, 1000, 500, 1050 });
        thisyear.Rows.Add(new Object[] { "30001", "ビール", "激辛ビール", 5500, 8000, 8500, 10000 });
        thisyear.Rows.Add(new Object[] { "30002", "ビール", "モルトビール", 3000, 3500, 2780, 4000 });
        thisyear.Rows.Add(new Object[] { "20004", "清涼飲料水", "ぶどうの街", 500, 300, 200, 700 });
        thisyear.Rows.Add(new Object[] { "30003", "ビール", "オリエントの村", 8000, 9500, 9580, 9000 });
        thisyear.Rows.Add(new Object[] { "40002", "焼酎", "吟醸 ほめごろし", 6000, 7000, 9000, 9500 });
        thisyear.Rows.Add(new Object[] { "40003", "焼酎", "大吟醸 オリエント", 1000, 5000, 6000, 5000 });
        thisyear.Rows.Add(new Object[] { "40005", "焼酎", "麦焼酎 ちこちこ", 1000, 1500, 1200, 1258 });
        thisyear.Rows.Add(new Object[] { "10002", "乳製品", "酪農ミルク（低脂肪）", 501, 202, 380, 456 });

        lastyear = myDataSet.Tables.Add("lastyear");
        lastyear.Columns.AddRange(new DataColumn[] { new DataColumn("製品ID",Type.GetType("System.String")), 
                                                    new DataColumn("製品種別", Type.GetType("System.String")), 
                                                    new DataColumn("製品名", Type.GetType("System.String")), 
                                                    new DataColumn("前年第１Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("前年第２Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("前年第３Ｑ", Type.GetType("System.Int32")) ,
                                                    new DataColumn("前年第４Ｑ", Type.GetType("System.Int32")) 
                                                    });

        lastyear.Rows.Add(new Object[] { "10001", "乳製品", "酪農ミルク", 2000, 1000, 4023, 5230 });
        lastyear.Rows.Add(new Object[] { "20001", "清涼飲料水", "いよかんドリンク", 1050, 2000, 2500, 2600 });
        lastyear.Rows.Add(new Object[] { "20002", "清涼飲料水", "ぶどうジュース", 3600, 2400, 1200, 1600 });
        lastyear.Rows.Add(new Object[] { "20003", "清涼飲料水", "マンゴードリンク", 1600, 1250, 356, 1020 });
        lastyear.Rows.Add(new Object[] { "30001", "ビール", "激辛ビール", 5600, 5000, 2500,1900 });
        lastyear.Rows.Add(new Object[] { "30002", "ビール", "モルトビール", 1000, 2500, 2760, 2000 });
        lastyear.Rows.Add(new Object[] { "20004", "清涼飲料水", "ぶどうの街", 500, 300, 200, 700 });
        lastyear.Rows.Add(new Object[] { "30003", "ビール", "オリエントの村", 1000, 500, 2580, 1230 });
        lastyear.Rows.Add(new Object[] { "40002", "焼酎", "吟醸 ほめごろし", 5000, 7589, 5000, 6895 });
        lastyear.Rows.Add(new Object[] { "40003", "焼酎", "大吟醸 オリエント", 800, 3568, 4521, 3564 });
        lastyear.Rows.Add(new Object[] { "40005", "焼酎", "麦焼酎 ちこちこ", 1000, 1512, 1212, 1058 });
        lastyear.Rows.Add(new Object[] { "10002", "乳製品", "酪農ミルク（低脂肪）", 301, 102, 280, 256 });

        // リレーションシップを設定します。
        myDataSet.Relations.Add("prddata", thisyear.Columns["製品ID"], lastyear.Columns["製品ID"]);
    }

    protected void FpSpread1_ChildViewCreated(object sender, FarPoint.Web.Spread.CreateChildViewEventArgs e)
    {
            FarPoint.Web.Spread.SheetView sv = e.SheetView;

            switch (sv.RelationName)
            {
                case "prddata":

                    // フォントサイズの設定
                    sv.DefaultStyle.Font.Size = FontUnit.Parse("80%");
                    sv.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
                    sv.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
                    sv.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%");

                    sv.Columns[0].Visible = false;
                    sv.Columns[1].Visible = false;
                    sv.Columns[2].Visible = false;

                    sv.RowHeader.AutoText = FarPoint.Web.Spread.HeaderAutoText.Blank;
                    sv.RowHeader.Width = 290;
                    sv.Columns[3].Width = 80;
                    sv.Columns[4].Width = 80;
                    sv.Columns[5].Width = 80;
                    sv.Columns[6].Width = 80;

                    sv.RowHeader.Cells[0, 0].Text = "前年同期";
                    sv.ColumnHeader.Visible = false;

                    FarPoint.Web.Spread.IntegerCellType ic = new FarPoint.Web.Spread.IntegerCellType();
                    NumberFormatInfo ninfo
                        = (NumberFormatInfo)(CultureInfo.CurrentCulture.NumberFormat.Clone());
                    ninfo.NumberGroupSizes = new int[] { 3 }; //整数部は３桁区切り
                    ic.NumberFormat = ninfo;

                    sv.Cells[0, 0, sv.RowCount - 1, sv.ColumnCount - 1].CellType = ic;
                    sv.DefaultStyle.Locked = true;

                    sv.DefaultStyle.BackColor = System.Drawing.Color.LightYellow;
                    sv.SheetCornerStyle.BackColor = System.Drawing.Color.LightYellow;
                    sv.ColumnHeader.DefaultStyle.BackColor = System.Drawing.Color.LightYellow;
                    sv.RowHeader.DefaultStyle.BackColor = System.Drawing.Color.LightYellow;

                    break;
            }
    }
}

Imports System.Globalization
Partial Public Class hierarchicalview
    Inherits System.Web.UI.Page

    Private myDataSet As New Data.DataSet()

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then
            Return
        End If

        ' セル型の自動設定を無効化
        FpSpread1.ActiveSheetView.DataAutoCellTypes = False

        ' データ作成
        InitData()
        FpSpread1.DataSource = myDataSet

        ' SPREAD初期化
        InitSpread(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' SPREAD設定
        FpSpread1.CommandBar.Visible = False
        FpSpread1.CssClass = "spreadStyle"
        FpSpread1.UseClipboard = False

        ' フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%")

        ' シート設定
        sheet.PageSize = sheet.RowCount

        ' 列幅の設定
        sheet.Columns(0).Width = 50
        sheet.Columns(1).Width = 100
        sheet.Columns(2).Width = 140
        sheet.Columns(3).Width = 80
        sheet.Columns(4).Width = 80
        sheet.Columns(5).Width = 80
        sheet.Columns(6).Width = 80

        ' 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle

        Dim ic As New FarPoint.Web.Spread.IntegerCellType()
        Dim ninfo As NumberFormatInfo = DirectCast(CultureInfo.CurrentCulture.NumberFormat.Clone(), NumberFormatInfo)
        ninfo.NumberGroupSizes = New Integer() {3}
        '整数部は３桁区切り
        ic.NumberFormat = ninfo
        sheet.Cells(0, 3, sheet.RowCount - 1, 6).CellType = ic
    End Sub

    Private Sub InitData()
        Dim thisyear As System.Data.DataTable, lastyear As System.Data.DataTable

        ' 当年度データ
        thisyear = myDataSet.Tables.Add("thisyear")
        thisyear.Columns.AddRange(New Data.DataColumn() {New Data.DataColumn("製品ID", Type.GetType("System.String")), New Data.DataColumn("製品種別", Type.GetType("System.String")), New Data.DataColumn("製品名", Type.GetType("System.String")), New Data.DataColumn("当年第１Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("当年第２Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("当年第３Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("当年第４Ｑ", Type.GetType("System.Int32"))})

        thisyear.Rows.Add(New [Object]() {"10001", "乳製品", "酪農ミルク", 5500, 5000, 4500, 6000})
        thisyear.Rows.Add(New [Object]() {"20001", "清涼飲料水", "いよかんドリンク", 1000, 3000, 2700, 2700})
        thisyear.Rows.Add(New [Object]() {"20002", "清涼飲料水", "ぶどうジュース", 3000, 3500, 4800, 4800})
        thisyear.Rows.Add(New [Object]() {"20003", "清涼飲料水", "マンゴードリンク", 2000, 1000, 500, 1050})
        thisyear.Rows.Add(New [Object]() {"30001", "ビール", "激辛ビール", 5500, 8000, 8500, 10000})
        thisyear.Rows.Add(New [Object]() {"30002", "ビール", "モルトビール", 3000, 3500, 2780, 4000})
        thisyear.Rows.Add(New [Object]() {"20004", "清涼飲料水", "ぶどうの街", 500, 300, 200, 700})
        thisyear.Rows.Add(New [Object]() {"30003", "ビール", "オリエントの村", 8000, 9500, 9580, 9000})
        thisyear.Rows.Add(New [Object]() {"40002", "焼酎", "吟醸 ほめごろし", 6000, 7000, 9000, 9500})
        thisyear.Rows.Add(New [Object]() {"40003", "焼酎", "大吟醸 オリエント", 1000, 5000, 6000, 5000})
        thisyear.Rows.Add(New [Object]() {"40005", "焼酎", "麦焼酎 ちこちこ", 1000, 1500, 1200, 1258})
        thisyear.Rows.Add(New [Object]() {"10002", "乳製品", "酪農ミルク（低脂肪）", 501, 202, 380, 456})

        lastyear = myDataSet.Tables.Add("lastyear")
        lastyear.Columns.AddRange(New Data.DataColumn() {New Data.DataColumn("製品ID", Type.GetType("System.String")), New Data.DataColumn("製品種別", Type.GetType("System.String")), New Data.DataColumn("製品名", Type.GetType("System.String")), New Data.DataColumn("前年第１Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("前年第２Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("前年第３Ｑ", Type.GetType("System.Int32")), New Data.DataColumn("前年第４Ｑ", Type.GetType("System.Int32"))})

        lastyear.Rows.Add(New [Object]() {"10001", "乳製品", "酪農ミルク", 2000, 1000, 4023, 5230})
        lastyear.Rows.Add(New [Object]() {"20001", "清涼飲料水", "いよかんドリンク", 1050, 2000, 2500, 2600})
        lastyear.Rows.Add(New [Object]() {"20002", "清涼飲料水", "ぶどうジュース", 3600, 2400, 1200, 1600})
        lastyear.Rows.Add(New [Object]() {"20003", "清涼飲料水", "マンゴードリンク", 1600, 1250, 356, 1020})
        lastyear.Rows.Add(New [Object]() {"30001", "ビール", "激辛ビール", 5600, 5000, 2500, 1900})
        lastyear.Rows.Add(New [Object]() {"30002", "ビール", "モルトビール", 1000, 2500, 2760, 2000})
        lastyear.Rows.Add(New [Object]() {"20004", "清涼飲料水", "ぶどうの街", 500, 300, 200, 700})
        lastyear.Rows.Add(New [Object]() {"30003", "ビール", "オリエントの村", 1000, 500, 2580, 1230})
        lastyear.Rows.Add(New [Object]() {"40002", "焼酎", "吟醸 ほめごろし", 5000, 7589, 5000, 6895})
        lastyear.Rows.Add(New [Object]() {"40003", "焼酎", "大吟醸 オリエント", 800, 3568, 4521, 3564})
        lastyear.Rows.Add(New [Object]() {"40005", "焼酎", "麦焼酎 ちこちこ", 1000, 1512, 1212, 1058})
        lastyear.Rows.Add(New [Object]() {"10002", "乳製品", "酪農ミルク（低脂肪）", 301, 102, 280, 256})

        ' リレーションシップを設定します。
        myDataSet.Relations.Add("prddata", thisyear.Columns("製品ID"), lastyear.Columns("製品ID"))
    End Sub

    Protected Sub FpSpread1_ChildViewCreated(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.CreateChildViewEventArgs) Handles FpSpread1.ChildViewCreated
        Dim sv As FarPoint.Web.Spread.SheetView = e.SheetView

        Select Case sv.RelationName
            Case "prddata"

                ' フォントサイズの設定
                sv.DefaultStyle.Font.Size = FontUnit.Parse("80%")
                sv.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
                sv.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
                sv.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%")

                sv.Columns(0).Visible = False
                sv.Columns(1).Visible = False
                sv.Columns(2).Visible = False

                sv.RowHeader.AutoText = FarPoint.Web.Spread.HeaderAutoText.Blank
                sv.RowHeader.Width = 290
                sv.Columns(3).Width = 80
                sv.Columns(4).Width = 80
                sv.Columns(5).Width = 80
                sv.Columns(6).Width = 80

                sv.RowHeader.Cells(0, 0).Text = "前年同期"
                sv.ColumnHeader.Visible = False

                Dim ic As New FarPoint.Web.Spread.IntegerCellType()
                Dim ninfo As NumberFormatInfo = DirectCast(CultureInfo.CurrentCulture.NumberFormat.Clone(), NumberFormatInfo)
                ninfo.NumberGroupSizes = New Integer() {3}
                '整数部は３桁区切り
                ic.NumberFormat = ninfo

                sv.Cells(0, 0, sv.RowCount - 1, sv.ColumnCount - 1).CellType = ic
                sv.DefaultStyle.Locked = True

                sv.DefaultStyle.BackColor = System.Drawing.Color.LightYellow
                sv.SheetCornerStyle.BackColor = System.Drawing.Color.LightYellow
                sv.ColumnHeader.DefaultStyle.BackColor = System.Drawing.Color.LightYellow
                sv.RowHeader.DefaultStyle.BackColor = System.Drawing.Color.LightYellow

                Exit Select
        End Select
    End Sub
End Class

<%@ Page MasterPageFile="~/MasterPage.master" Language="c#" AutoEventWireup="true" 
         Inherits="hierarchicalview" CodeFile="hierarchicalview.aspx.cs" %>

<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <farpoint:FpSpread ID="FpSpread1" runat="server"  BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px" onchildviewcreated="FpSpread1_ChildViewCreated">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark" />
        <Sheets>
            <farpoint:SheetView SheetName="Sheet1">
            </farpoint:SheetView>
        </Sheets>
    </farpoint:FpSpread>
</asp:Content>