Calendarで選択された日付をSPREADに設定する
1．CalendarのSelectionChangedイベントでSPREADに値を設定する
それでは次にCalendarで選択した日付をSPREADに設定する処理を追加しましょう。これにはCalendarのSelectionChangedイベントを使用します。次のコードをWebフォームのソースコード「Default.aspx.vb」に追加します。
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged ' カレンダーの日付を取得 Dim dval As DateTime = Calendar1.SelectedDate ' セルに日付を設定 With FpSpread1.Sheets(0) .SetValue(.ActiveRow, .ActiveColumn, _ dval.ToString("yyyy/MM/dd")) End With ' カレンダーを非表示 Calendar1.Visible = False End Sub
protected override void OnInit(EventArgs e) { base.OnInit(e); // イベントの登録 FpSpread1.ButtonCommand += new FarPoint.Web.Spread.SpreadCommandEventHandler( FpSpread1_ButtonCommand); Calendar1.SelectionChanged+=new EventHandler( Calendar1_SelectionChanged); } protected void Calendar1_SelectionChanged(object sender, System.EventArgs e) { // カレンダーの日付を取得 DateTime dval = Calendar1.SelectedDate; // セルに日付を設定 { FarPoint.Web.Spread.SheetView sh = FpSpread1.Sheets[0]; sh.SetValue(sh.ActiveRow, sh.ActiveColumn, dval.ToString("yyyy/MM/dd")); } // カレンダーを非表示 Calendar1.Visible = false; }
OnInitメソッドは既に記述されたものがある場合、イベントの登録部分のみを追記してください。
2．テスト
Webサイトを実行してみましょう。カレンダーのアイコンをクリックして日付を選択します。選択した日付がセルに設定されます。
その他
ここまででポップアップカレンダーの主要な機能を実装しました。しかし、まだ問題が残っています。
問題 ポップアップカレンダーがSPREADから大きく外れた位置に表示される（クリックしたセルの上に表示されないと困る）。
これからこの問題に対処していきます。
1．Calendarをクリックした位置に表示する
イメージ型セル「MyCal」を作成した際、クリックイベントをクライアント側でも処理できるようJavaScriptでclickedCalCellメソッドを追加しました。このメソッドを使用します。
clickedCalCellメソッドではevent引数からクリック位置を取得できます。Calendarをこの位置に表示すれば問題を解決できます。まず、Calendarを指定した位置（絶対位置）に表示できるよう、CalendarのStyleプロパティを次のように変更します。Webフォーム「Default.aspx」のHTMLソースを開いて直接HTMLを編集します。
<asp:Calendar ID="Calendar1" runat="server"
Visible="False" Style="position: static">
<asp:Calendar ID="Calendar1" runat="server"
Visible="False"
Style="position: absolute; z-index:10000;background-color:White">
そして、JavaScriptにopenCalメソッドを追加します。
<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(); } function openCal(){ //カレンダーの表示位置を設定 var cp = document.getElementById("Calendar1"); cp.style.left=x+"px"; cp.style.top=y+"px"; } </script>
ButtonCommandイベントでカレンダーを表示した直後、このopenCalメソッドを実行してカレンダーを正しい位置に表示します。
これにはASP.NET AJAXのScriptManager.RegisterStartupScriptメソッドを使用します。次のスクリプトをWebフォームのソースコード「Default.aspx.vb」のButtonCommandイベントに追加します。
' カレンダーを正しい位置に表示する ScriptManager.RegisterStartupScript(Me, Me.GetType(), _ "onStartUpScript", "openCal();", True)
// カレンダーを正しい位置に表示する ScriptManager.RegisterStartupScript(this, this.GetType(), _ "onStartUpScript", "openCal();", true);
この処理を追加したButtonCommandイベントの全文は次のようになります。
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 ' カレンダーを正しい位置に表示する ScriptManager.RegisterStartupScript(Me, Me.GetType(), _ "onStartUpScript", "openCal();", True) End If ' カレンダーの表示を切り替える Calendar1.Visible = Not Calendar1.Visible End If End Sub
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(this, this.GetType(), "onStartUpScript", "openCal();", true); } // カレンダーの表示を切り替える Calendar1.Visible = !Calendar1.Visible; } }
また、この処理はユーザーがカレンダーの次の月をクリックした時にも必要です。CalendarのVisibleMonthChangedイベントにも同じ処理を追加します。次のコードをWebフォームのソースコード「Default.aspx.vb」に追加します。
Protected Sub Calendar1_VisibleMonthChanged(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) _ Handles Calendar1.VisibleMonthChanged ' カレンダーを正しい位置に表示する ScriptManager.RegisterStartupScript(Me, Me.GetType(), _ "onStartUpScript", "openCal();", True) End Sub
protected override void OnInit(EventArgs e) { base.OnInit(e); // イベントの登録 FpSpread1.ButtonCommand += new FarPoint.Web.Spread.SpreadCommandEventHandler( FpSpread1_ButtonCommand); Calendar1.SelectionChanged += new EventHandler(Calendar1_SelectionChanged); Calendar1.VisibleMonthChanged += new MonthChangedEventHandler(Calendar1_VisibleMonthChanged); } protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e) { // カレンダーを正しい位置に表示する ScriptManager.RegisterStartupScript(this, this.GetType(), "onStartUpScript", "openCal();", true); }
2．テスト
Webサイトを実行してみましょう。日付をクリックした時、カレンダーはクリックした位置に表示されます。また次の月へ移動した場合も、カレンダーは正しい位置に表示されます。
3．完成
これでサンプルアプリケーションは完成です。もしマシンにFirefoxがインストールされていれば、FirefoxでWebサイトを実行してみてください。WebサイトがIEと同様にFirefoxでも動作することを確認できます。
最後に
このようにASP.NET AJAXとSPREADを使用することで、SPREADとSPREAD以外のコントロールとを連携したより広範な処理にAJAXを活用することができます。
ASP.NET AJAX、およびSPREAD AJAXのそれぞれが適所で活用され、今までにないレベルの対話性、レスポンスを実現したWebアプリケーションを作ることで、ユーザビリティの高いWebサービスを提供できるのではないでしょうか。
