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

スクロールの同期

クライアント側スクリプトで提供されるonScrollイベントを使用すると クライアント側の処理において、２つのSPREAD間でスクロールの同期をとることができます。 onScroll イベントはシートをスクロールした時に発生します。

このサンプルでは上下いずれかのSPREADを水平方向、または垂直方向にスクロールすると もう一方のSPREADも同様にスクロールされます。
 製品ID製品分類製品名4月計画5月計画6月計画7月計画8月計画9月計画10月計画11月計画12月計画1月計画2月計画3月計画
110001乳製品酪農ミルク5,5005,0004,5006,0005,5005,0004,5006,0005,5005,0004,5006,000
220001清涼飲料水いよかんドリンク1,0003,0002,7002,7001,0003,0002,7002,7001,0003,0002,7002,700
320002清涼飲料水ぶどうジュース3,0003,5004,8004,8003,0003,5004,8004,8003,0003,5004,8004,800
420003清涼飲料水マンゴードリンク2,0001,0005001,0502,0001,0005001,0502,0001,0005001,050
530001ビール激辛ビール5,5008,0008,50010,0005,5008,0008,50010,0005,5008,0008,50010,000
630002ビールモルトビール3,0003,5002,7804,0003,0003,5002,7804,0003,0003,5002,7804,000
720004清涼飲料水ぶどうの街500300200700500300200700500300200700
830003ビールオリエントの村8,0009,5009,5809,0008,0009,5009,5809,0008,0009,5009,5809,000
940002焼酎吟醸 ほめごろし6,0007,0009,0009,5006,0007,0009,0009,5006,0007,0009,0009,500
1040003焼酎大吟醸 オリエント1,0005,0006,0005,0001,0005,0006,0005,0001,0005,0006,0005,000

 製品ID製品分類製品名4月実績5月実績6月実績7月実績8月実績9月実績10月実績11月実績12月実績1月実績2月実績3月実績
110001乳製品酪農ミルク5,6005,1004,6006,1005,6005,1004,6006,1005,6005,1004,6006,100
220001清涼飲料水いよかんドリンク1,1003,1002,8002,8001,1003,1002,8002,8001,1003,1002,8002,800
320002清涼飲料水ぶどうジュース3,1003,6004,9004,9003,1003,6004,9004,9003,1003,6004,9004,900
420003清涼飲料水マンゴードリンク2,1001,1006001,1502,1001,1006001,1502,1001,1006001,150
530001ビール激辛ビール5,6008,1008,60010,1005,6008,1008,60010,1005,6008,1008,60010,100
630002ビールモルトビール3,1003,6002,8804,1003,1003,6002,8804,1003,1003,6002,8804,100
720004清涼飲料水ぶどうの街600400300800600400300800600400300800
830003ビールオリエントの村8,1009,6009,6809,1008,1009,6009,6809,1008,1009,6009,6809,100
940002焼酎吟醸 ほめごろし6,1007,1009,1009,6006,1007,1009,1009,6006,1007,1009,1009,600
1040003焼酎大吟醸 オリエント1,1005,1006,1005,1001,1005,1006,1005,1001,1005,1006,1005,100
1140005焼酎麦焼酎 ちこちこ1,1001,6001,3001,3581,1001,6001,3001,3581,1001,6001,3001,358
1210002乳製品酪農ミルク（低脂肪）601302480556601302480556601302480556

ソースコード

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

public partial class clientsynchroscroll : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // クライアントイベントの設定
        string js = "var spid1='" + FpSpread1.ClientID + "';";
        js += "var spid2='" + FpSpread2.ClientID + "';";
        js += "setTimeout(\"inite()\", 1000);" + "\r\n";
        js += "function inite()" + "\r\n";
        js += "{" + "\r\n";
        js += "    var s1=document.getElementById(spid1);" + "\r\n";
        js += "    var s2=document.getElementById(spid2);" + "\r\n";
        js += "    if (document.all) {" + "\r\n";
        js += "        if (s1.addEventListener) {" + "\r\n";
        js += "            s1.addEventListener(\"Scroll\", scrolled, false);" + "\r\n";
        js += "            s2.addEventListener(\"Scroll\", scrolled, false);" + "\r\n";
        js += "        } else {" + "\r\n";
        js += "            s1.onScroll = scrolled;" + "\r\n";
        js += "            s2.onScroll = scrolled;" + "\r\n";
        js += "        }" + "\r\n";
        js += "    } else {" + "\r\n";
        js += "        s1.addEventListener(\"Scroll\", scrolled, false);" + "\r\n";
        js += "        s2.addEventListener(\"Scroll\", scrolled, false);" + "\r\n";
        js += "    }" + "\r\n";
        js += "}" + "\r\n";
        ClientScript.RegisterStartupScript(this.GetType(), "onStartUpScript", js, true);

        if (IsPostBack) return;

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

        // データ連結
        DataSet ds1 = new DataSet();
        ds1.ReadXml(MapPath("../App_Data/datapln.xml"));
        FpSpread1.DataSource = ds1;

        DataSet ds2 = new DataSet();
        ds2.ReadXml(MapPath("../App_Data/datares.xml"));
        FpSpread2.DataSource = ds2;

        FarPoint.Web.Spread.SheetView sheet1 = FpSpread1.Sheets[0];
        FarPoint.Web.Spread.SheetView sheet2 = FpSpread2.Sheets[0];

        // SPREAD初期化
        InitSpread(sheet1,FpSpread1);
        InitSpread(sheet2,FpSpread2);
    }
    private void InitSpread(FarPoint.Web.Spread.SheetView sheet,FarPoint.Web.Spread.FpSpread spread)
    {
        // SPREAD設定
        spread.CommandBar.Visible = false;
        spread.Style.Add("position", "relative");
        spread.Width = 650;
        spread.Height = 150;
        spread.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 = 70;
        sheet.Columns[2].Width = 130;

        for (int i = 3; i < spread.ActiveSheetView.ColumnCount; i++)
        {
            sheet.Columns[i].Width = 65;
        }

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

        // 各列のセル型を設定
        FarPoint.Web.Spread.GeneralCellType gnr = new FarPoint.Web.Spread.GeneralCellType();
        gnr.FormatString = "#,##0";
        sheet.Columns[3, sheet.ColumnCount - 1].CellType = gnr;
        sheet.Columns[3, sheet.ColumnCount - 1].HorizontalAlign = HorizontalAlign.Right;       
    }
}


Partial Public Class clientsynchroscroll
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' クライアントイベントの設定
        Dim js As String = "var spid1='" + FpSpread1.ClientID & "';"
        js += "var spid2='" + FpSpread2.ClientID & "';"
        js += "setTimeout(""inite()"", 1000);" & System.Environment.NewLine
        js += "function inite()" & System.Environment.NewLine
        js += "{" & System.Environment.NewLine
        js += "    var s1=document.getElementById(spid1);" & System.Environment.NewLine
        js += "    var s2=document.getElementById(spid2);" & System.Environment.NewLine
        js += "    if (document.all) {" & System.Environment.NewLine
        js += "        if (s1.addEventListener) {" & vbCr & vbLf
        js += "            s1.addEventListener(""Scroll"", scrolled, false);" & System.Environment.NewLine
        js += "            s2.addEventListener(""Scroll"", scrolled, false);" & System.Environment.NewLine
        js += "        } else {" & System.Environment.NewLine
        js += "            s1.onScroll = scrolled;" & System.Environment.NewLine
        js += "            s2.onScroll = scrolled;" & System.Environment.NewLine
        js += "        }" & System.Environment.NewLine
        js += "    } else {" & System.Environment.NewLine
        js += "        s1.addEventListener(""Scroll"", scrolled, false);" & System.Environment.NewLine
        js += "        s2.addEventListener(""Scroll"", scrolled, false);" & System.Environment.NewLine
        js += "    }" & System.Environment.NewLine
        js += "}" & System.Environment.NewLine

        ClientScript.RegisterStartupScript(Me.[GetType](), "onStartUpScript", js, True)

        If IsPostBack Then
            Return
        End If

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

        ' データ連結
        Dim ds1 As New System.Data.DataSet()
        ds1.ReadXml(MapPath("../App_Data/datapln.xml"))
        FpSpread1.DataSource = ds1

        Dim ds2 As New System.Data.DataSet()
        ds2.ReadXml(MapPath("../App_Data/datares.xml"))
        FpSpread2.DataSource = ds2

        Dim sheet1 As FarPoint.Web.Spread.SheetView = FpSpread1.Sheets(0)
        Dim sheet2 As FarPoint.Web.Spread.SheetView = FpSpread2.Sheets(0)

        ' SPREAD初期化
        InitSpread(sheet1, FpSpread1)
        InitSpread(sheet2, FpSpread2)
    End Sub

    Private Sub InitSpread(ByVal sheet As FarPoint.Web.Spread.SheetView, ByVal spread As FarPoint.Web.Spread.FpSpread)
        ' SPREAD設定
        spread.CommandBar.Visible = False
        spread.Style.Add("position", "relative")
        spread.Width = 650
        spread.Height = 150
        spread.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 = 70
        sheet.Columns(2).Width = 130

        For i As Integer = 3 To spread.ActiveSheetView.ColumnCount - 1
            sheet.Columns(i).Width = 65
        Next

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

        ' 各列のセル型を設定
        Dim gnr As New FarPoint.Web.Spread.GeneralCellType()
        gnr.FormatString = "#,##0"
        sheet.Columns(3, sheet.ColumnCount - 1).CellType = gnr
        sheet.Columns(3, sheet.ColumnCount - 1).HorizontalAlign = HorizontalAlign.Right
    End Sub
End Class

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

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" Runat="Server">
<script type="text/javascript">
    function scrolled(e) {
        var e = e || window.event;        
        var s = e.target || e.srcElement;
        var str;
        if (!(s.id.lastIndexOf("FpSpread1") < 0))
            str = s.id.replace("FpSpread1", "FpSpread2");
        else
            str = s.id.replace("FpSpread2", "FpSpread1");

        var v = document.getElementById(s.id + "_view");
        var v2 = document.getElementById(str + "_view");
        v2.scrollLeft = v.scrollLeft;
        v2.scrollTop = v.scrollTop;
    }       
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <farpoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark" >
<Background BackgroundImageUrl="SPREADCLIENTPATH:/img/cbbg.gif"></Background>
        </CommandBar>
        <Sheets>
            <farpoint:SheetView SheetName="Sheet1">
            </farpoint:SheetView>
        </Sheets>
        <ClientEvents Scroll="scrolled" />

<TitleInfo BackColor="#E7EFF7" ForeColor="" HorizontalAlign="Center" VerticalAlign="NotSet" Font-Size="X-Large"></TitleInfo>
    </farpoint:FpSpread>
    <br />
    <farpoint:FpSpread ID="FpSpread2" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark" >
<Background BackgroundImageUrl="SPREADCLIENTPATH:/img/cbbg.gif"></Background>
        </CommandBar>
        <Sheets>
            <farpoint:SheetView SheetName="Sheet1">
            </farpoint:SheetView>
        </Sheets>
        <ClientEvents Scroll="scrolled" />

<TitleInfo BackColor="#E7EFF7" ForeColor="" HorizontalAlign="Center" VerticalAlign="NotSet" Font-Size="X-Large"></TitleInfo>
    </farpoint:FpSpread>
</asp:Content>