Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAXとSPREADの連携

SPREAD for .NET Web Forms EditionのAJAXエンジンを活用する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/08/28 14:00

目次

SPREADのイベントでCalendarを表示する

1.CalendarのVisibleプロパティをFalseに設定する

 まず、CalendarのVisibleプロパティをFalseに設定し、初期状態ではCalendarが表示されないように設定します。Calendarを選択した状態でプロパティウィンドウを表示し、VisibleプロパティをFalseに設定します。

2.SPREADのイメージ型セルを拡張する

 次にSPREADのイメージ型セルのサブクラスを作成します。イメージ型セルを使用することでセルにカレンダーのアイコンを表示します。ただ、イメージ型セルにはアイコンのクリックイベントを処理する機能がないのでサブクラスを作成して拡張します。

 VS2005の[Webサイト|新しい項目を追加する]メニューから「クラス」を選択します。名前は、

  • C#の場合…MyCal.cs
  • VBの場合…MyCal.vb

 とします。

 生成されたクラスに次にコードをコピーします。

VB
' カレンダー型セルクラス
<Serializable()> Public Class MyCal
    Inherits FarPoint.Web.Spread.ImageCellType
    Implements FarPoint.Web.Spread.Model.ICanSerializeXml

    ' SPREADのID
    Dim _spreadID As String = ""
    ' ポストバック時のコマンド名
    Dim _commandName As String = ""

    Public WriteOnly Property SpreadID() As String
        Set(ByVal value As String)
            _spreadID = value
        End Set
    End Property

    Public WriteOnly Property CommandName() As String
        Set(ByVal value As String)
            _commandName = value
        End Set
    End Property

    Public Sub New()
    End Sub

    Public Overrides Function PaintCell(ByVal id As String, _
            ByVal parent As System.Web.UI.WebControls.TableCell, _
            ByVal style As FarPoint.Web.Spread.Appearance, _
            ByVal margin As FarPoint.Web.Spread.Inset, _
            ByVal value As Object, _
            ByVal upperLevel As Boolean) As System.Web.UI.Control
        ' ポストバック文字列を生成
        Dim jscript As String = _
           parent.Page.ClientScript.GetPostBackEventReference(_
              parent.Page.FindControl(_spreadID), _commandName)
        ' セルのクリックイベントにスクリプトを設定
        parent.Attributes.Add("onclick", "clickedCalCell(event);" _
                                                           & jscript)
        Return MyBase.PaintCell(id, parent, style, margin, _
                                                   value, upperLevel)
    End Function

    Public ReadOnly Property CanSerializeXml() As Boolean _
        Implements FarPoint.Web.Spread.Model.
                                    ICanSerializeXml.CanSerializeXml
        Get
            ' 独自にプロパティを追加した場合、Return Falseを設定
            Return False
        End Get
    End Property
End Class
C#
// カレンダー型セルクラス
[Serializable()]
public class MyCal : FarPoint.Web.Spread.ImageCellType, 
                     FarPoint.Web.Spread.Model.ICanSerializeXml
{
    // SPREADのID
    string _spreadID = "";
    // ポストバック時のコマンド名
    string _commandName = "";

    public string SpreadID
    {
        set { _spreadID = value; }
    }

    public string CommandName
    {
        set { _commandName = value; }
    }

    public MyCal()
    {
    }

    public override System.Web.UI.Control PaintCell(string id,
               System.Web.UI.WebControls.TableCell parent, 
               FarPoint.Web.Spread.Appearance style, 
               FarPoint.Web.Spread.Inset margin, 
               object value, bool upperLevel)
    {
        // ポストバック文字列を生成
        string jscript 
           = parent.Page.ClientScript.GetPostBackEventReference(
               parent.Page.FindControl(_spreadID), _commandName);
        // セルのクリックイベントにスクリプトを設定
        parent.Attributes.Add("onclick",
                              "clickedCalCell(event);" + jscript);
        return base.PaintCell(id, parent, 
                              style, margin, value, upperLevel);
    }

    public bool CanSerializeXml
    {
        // 独自にプロパティを追加した場合、Return Falseを設定
        get { return false; }
    }
}

3.カレンダーのアイコンに使用するイメージファイルを用意する

 次にアイコンとして使用するカレンダーのイメージファイルを用意しWebサイトにコピーしてください。ここでは次のイメージファイルを使用します。

カレンダーイメージ
カレンダーイメージ

 これを「(Webサイトフォルダ)\images\calendar.gif」として保存します。

4. シートにイメージ型セルを設定

 それでは、シートにイメージ型セルを設定します。Webフォームのソースコード「Default.aspx.vb」を開き次のコードをコピーします。このコードではシートの2列目にイメージ型セルを設定します。

VB
Private Sub Page_Load(ByVal sender As System.Object, _
                      ByVal e As System.EventArgs) Handles MyBase.Load

    If IsPostBack Then Return

    ' 2列目をカレンダー型セルに設定
    FpSpread1.ActiveSheetView.Columns(1).Label = "日付"
    Dim imgbtn As New MyCal
    imgbtn.ImageAlign = ImageAlign.Right
    imgbtn.ImageUrl = "images/calendar.gif"
    imgbtn.SpreadID = FpSpread1.ClientID
    imgbtn.CommandName = "dateclick"

    FpSpread1.ActiveSheetView.Columns(1).CellType = imgbtn
    FpSpread1.ActiveSheetView.Cells(1, 1).Value = _
                                  DateTime.Now.ToString("yyyy/MM/dd")

    FpSpread1.ActiveSheetView.Columns(1).Width += 20

End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;

    // 2列目をカレンダー型セルに設定
    FpSpread1.ActiveSheetView.Columns[1].Label = "日付";
    MyCal imgbtn = new MyCal();
    imgbtn.ImageAlign = ImageAlign.Right;
    imgbtn.ImageUrl = "images/calendar.gif";
    imgbtn.SpreadID = FpSpread1.ClientID;
    imgbtn.CommandName = "dateclick";

    FpSpread1.ActiveSheetView.Columns[1].CellType = imgbtn;
    FpSpread1.ActiveSheetView.Cells[1, 1].Value
       = DateTime.Now.ToString("yyyy/MM/dd");

    FpSpread1.ActiveSheetView.Columns[1].Width += 20;
}

 また、イメージ型セルのクリックイベントをクライアント側で処理するためのJavaScriptをWebフォームに追加します。JavaScriptはWebフォーム「Default.aspx」のHTMLソースを開き、<head>タグの内側に挿入します。

JavaScript
<script type="text/javascript">
var x; var y;
function clickedCalCell(e) {      
    //セルのクリック位置を保存
    var e=e||window.event;   
    x=e.clientX;
    y=e.clientY;
    //ポストバックデータの更新
    var s=document.getElementById("FpSpread1");
    s.UpdatePostbackData();                  
}            
</script>

5.SPREADのButtonCommandイベントでCalendarを表示する

 イメージ型セルのサブクラス「MyCal」では、セルのクリックでポストバックが発生します。この時、サーバ側ではSPREADのButtonCommandイベントが発生します。この中でカレンダーを表示します。また、カレンダーが表示されている状態でセルがクリックされたときはカレンダーを閉じます。次のコードをWebフォームのソースコード「Default.aspx.vb」に追加します。

VB
Protected Sub FpSpread1_ButtonCommand(ByVal sender As Object, _
    ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) _
          Handles FpSpread1.ButtonCommand

    If e.CommandName = "dateclick" Then

        If Not Calendar1.Visible Then
            ' カレンダーに日付を設定する
            With FpSpread1.Sheets(0)
                If .GetValue(.ActiveRow, .ActiveColumn) _
                                                   IsNot Nothing Then
                    Calendar1.SelectedDate = _
                        .GetValue(.ActiveRow, .ActiveColumn)
                End If
            End With

        End If
        ' カレンダーの表示を切り替える
        Calendar1.Visible = Not Calendar1.Visible

    End If
End Sub
C#
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    // イベントの登録
    FpSpread1.ButtonCommand 
      += new FarPoint.Web.Spread.SpreadCommandEventHandler(
             FpSpread1_ButtonCommand);
}

protected void FpSpread1_ButtonCommand(object sender, 
                        FarPoint.Web.Spread.SpreadCommandEventArgs e)
{
    if (e.CommandName == "dateclick")
    {
        if (!Calendar1.Visible)
        {
            // カレンダーに日付を設定する
            FarPoint.Web.Spread.SheetView sh = FpSpread1.Sheets[0];
            if (sh.GetValue(sh.ActiveRow, sh.ActiveColumn) != null)
            {
                Calendar1.SelectedDate
                  = Convert.ToDateTime(sh.GetValue(
                                               sh.ActiveRow, 
                                               sh.ActiveColumn));
            }
            // カレンダーを正しい位置に表示する
            ScriptManager.RegisterStartupScript(Me, 
                                                Me.GetType(), 
                                                "onStartUpScript", 
                                                "openCal();", 
                                                true);
        }
        // カレンダーの表示を切り替える
        Calendar1.Visible = !Calendar1.Visible;
    }
}

6.テスト

 ここまでの作業で、次の処理を実装しました。

  • 必要なコントロールをWebフォームに配置した。
  • SPREADのイメージ型セルを拡張して「MyCal」クラスを作成した。
  • イメージ型セルのクリックイベントでカレンダーが表示されるようにした。

 ここで一度、Webサイトを実行してみましょう。実行するとセルにカレンダーのアイコンが表示されます。アイコンをクリックしてみましょう。

 カレンダーが表示されます。もう一度クリックするとカレンダーが閉じられます。これらの処理はUpdatePanelにより、ポストバックではなくコールバックで行われます。

アイコンをクリックするとカレンダーの表示が切り替る
アイコンをクリックするとカレンダーの表示が切り替る

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • グレープシティ株式会社(グレープシティカブシキガイシャ)

     宮城県仙台市に本社を構えるグレープシティでは、日本の業務に適したシステムをより早く開発するためのソフトウェアを提供しています。エンドユーザーの利用しやすさ、幅広いユーザー環境への対応、そして何よりプログラマの作業を軽減することを一番に目指しています。 公式サイト...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5