Home > Archives > 2007年8月 Archive

2007年8月 Archive

CalendarExtender+MaskedEditExtenderの実装サンプル

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" />


CalendarExtenderでカレンダーがDropDownの下に表示される

またもや、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以外のブラウザできちんと動作するかは確認してないので分かりませんが...

CalendarExtenderでカレンダーを閉じるときにPostBackしてしまう

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

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

CollapsiblePanelExtender使用時に画面がちらつく

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>

CalendarExtenderでカレンダーを日本語表記にする

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

Index of all entries

Home > Archives > 2007年8月 Archive

Search
Feeds
Tag Cloud
Recommend

SQLパズル 第2版 プログラミングが変わる書き方/考え方
SQLパズル 第2版 プログラミングが変わる書き方/考え方

ソフトウェアアーキテクチャ―ソフトウェア開発のためのパターン体系
ソフトウェアアーキテクチャ―ソフトウェア開発のためのパターン体系

ITアーキテクト vol.1
ITアーキテクト vol.1

オブジェクト指向における再利用のためのデザインパターン
オブジェクト指向における再利用のためのデザインパターン

増補改訂版 Java言語で学ぶデザインパターン入門
増補改訂版 Java言語で学ぶデザインパターン入門

増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編
増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編

J2EEデザインパターン
J2EEデザインパターン

アンチパターン―ソフトウェア危篤患者の救出
アンチパターン―ソフトウェア危篤患者の救出

世界でいちばん簡単なネットワークのe本―ネットワークとTCP/IPの基本と考え方がわかる本
世界でいちばん簡単なネットワークのe本―ネットワークとTCP/IPの基本と考え方がわかる本

Return to page top