2007年8月 Archive

CalendarExtenderネタが続いたので、実装のテンプレートを公開しておきます。
[***]の部分を、日付入力用TextBoxのIDに一括置換してください。
あと、カレンダーのアイコンはご自身で用意してください。

	<asp:ImageButton runat="Server" ID="***Image" ImageUrl="~/images/カレンダーのアイコン.jpg" AlternateText="カレンダーを表示します" CausesValidation="False" OnClientClick="return false;" />

	<ajaxToolkit:MaskedEditValidator ID="***Validator" runat="server" Display="Dynamic"

		ControlExtender="***Mask" ControlToValidate="***" InvalidValueBlurredMessage="日付の入力が正しくありません" ValidationGroup="Main" />


	<ajaxToolkit:CalendarExtender ID="***Extender" runat="server" CssClass="ajax__calendar" TargetControlID="***" PopupButtonID="***Image" />

	<ajaxToolkit:MaskedEditExtender ID="***Mask" runat="server" TargetControlID="***"

		Mask="9999/99/99" CultureName="ja-JP" MaskType="Date"

		OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" AcceptNegative="Left" />

またもや、DropDownなんですが．．．
CalendarExtenderで表示したカレンダーにDropDownが被っていると、DropDownの方が上に表示されてしまいます。
その他のコントロールの場合は大丈夫そうなので、相変わらずDropDownとの相性のようです。
今回の問題は結構有名なのか、すぐに解決方法が見つかりました。

How do I get the CalendarExtender to show over a dropdown?

要約すると、スタイルシートに以下を追加します。

/* CalendarExtender */

.ajax__calendar

{

    position: relative;

    left: 0px !important;

    top: 0px !important;

    visibility: visible; display: block;

}

.ajax__calendar iframe 

{

    left: 0px !important;

    top: 0px !important;

}

CalendarExtenderのCssClassでajax__calendarを指定します。
こんな感じ

<ajaxToolkit:CalendarExtender ID="***Extender" runat="server" CssClass="ajax__calendar" TargetControlID="***" PopupButtonID="***Image" />

IE以外のブラウザできちんと動作するかは確認してないので分かりませんが．．．

ImageButtonにCalendarExtenderを割り当てたところ、カレンダーは表示されるのですが、カレンダーが表示されているときに再度押下すると、PostBackが発生しました。
PostBackするということは、Submitしているのだろうということで、ImageButtonのOnClientClick属性に OnClientClick="return false;" を設定したところ、PostBackしなくなりました。

そんだけなんですが、忘れないようにメモってことで。

CollapsiblePanelExtenderを使用しているとき、画面表示後に一瞬消えてもう一度描画処理が行われます。
再現する画面と再現しない画面があるので試行錯誤していたら、DropDownListを表示している画面だけに発生していることが分かりました。

恐らくバグだろうと思い、ぐぐってみると、それらしき情報が見つかりました。
どうやら、DropDownListというより、Selectタグとの相性みたいですね。
CollapsiblePanelExtender Flicker Solution

以下、大体の説明です。

1.DropDownListコントロールのstyleで非表示にしておきます。

style="visibility:hidden;"

2.以下のJavaScriptを追加します。このスクリプトにより、pageLoad時にstyleの非表示が解除されます。

<script language="javascript" type="text/javascript">

function pageLoad()

{ 

	var dropdowns = document.getElementsByTagName("select");

	if (dropdowns)

	{

		for (i=0; i < dropdowns.length; i++)

		{

			dropdowns[i].style.visibility = "visible";

		}

	}

}

</script>

ScriptManagerのEnableScriptGlobalization、EnableScriptLocalization属性を共にtrueにすればいいようです。
CalendarExtenderは特に何かしなくても、勝手に日本語になりました。
便利だけど、ちょっと分かりにくいかも。