PowerTools InputMan for ASP.NET 8.0J
ドロップダウン機能

テキストコントロールには、エディットウィンドウを表示するドロップダウン機能が搭載されています。


(図)ドロップダウンエディット

ドロップダウンエディットウィンドウを表示する
DropDownプロパティが参照するDropDownオブジェクトは、コントロール上にドロップダウンボタンを表示させます。ドロップダウンボタンをクリックするか、キーボードで[Alt]+[↓]キーを押下することで、テキスト入力用のエディットウィンドウを表示できます。また、ショートカットエクステンダには、デフォルトで[F7]キーがドロップダウン動作に割り当てられています。

ドロップダウン機能を有効にするには、まずDropDownオブジェクトのEnabledプロパティをTrueに設定します。次に、VisibleプロパティをTrueに設定してドロップダウンボタンを表示させます。

次のサンプルコードは、テキストコントロールにドロップダウンボタンを設定する方法を示します。

GcTextBox1.DropDown.Enabled = True
GcTextBox1.DropDown.Visible = True
GcTextBox1.DropDown.Enabled = true;
GcTextBox1.DropDown.Visible = true;
ドロップダウンエディットの概要
ドロップダウン機能を有効にしたときに表示されるドロップダウンエディットは、コントロールのテキストエリアに入りきらないテキストを入力、編集するためのウィンドウです。エディットウィンドウでは、テキストコントロールの入力エリアと同様テキストの入力や編集を行うことができます。

ドロップダウンエディットに入力を行った後、[Enter]キーを押下するとドロップダウンエディットが閉じ、コントロールのTextプロパティに入力した文字が設定されます。

また、エディットウィンドウ内で改行を行う場合は、[Ctrl]+[Enter]キーを使います。

ドロップダウンエディットの設定は、コントロールのDropDownEditorプロパティが参照する、DropDownEditorクラスのメンバを使用して行います。

次のサンプルコードでは、ドロップダウンエディットの表示位置および背景色、文字色をせっていします。
Imports GrapeCity.Web.Input.Core

GcTextBox1.DropDownEditor.Align = AlignEnum.Right
GcTextBox1.DropDownEditor.BackColor = Color.AliceBlue
GcTextBox1.DropDownEditor.ForeColor = Color.Blue
using GrapeCity.Web.Input.Core;

GcTextBox1.DropDownEditor.Align = AlignEnum.Right;
GcTextBox1.DropDownEditor.BackColor = Color.AliceBlue;
GcTextBox1.DropDownEditor.ForeColor = Color.Blue;
ドロップダウンボタンのカスタマイズ
DropDownオブジェクトを使用して、下記のドロップダウンボタンのカスタマイズが可能です。

次のサンプルコードは、ドロップダウンボタンをカスタマイズする例です。
Imports GrapeCity.Web.Input.Core

GcTextBox1.DropDown.AutoDropDown = True
GcTextBox1.DropDown.DropDownShadow = True
GcTextBox1.DropDown.Position = ButtonPosition.Outside
GcTextBox1.DropDown.ClosingAnimation = DropDownAnimation.Scroll
GcTextBox1.DropDown.OpeningAnimation = DropDownAnimation.Fade
GcTextBox1.DropDown.ButtonImage = "~/Images/DropDown.png"
GcTextBox1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png"
using GrapeCity.Web.Input.Core;

GcTextBox1.DropDown.AutoDropDown = true;
GcTextBox1.DropDown.DropDownShadow = true;
GcTextBox1.DropDown.Position = ButtonPosition.Outside;
GcTextBox1.DropDown.ClosingAnimation = DropDownAnimation.Scroll;
GcTextBox1.DropDown.OpeningAnimation = DropDownAnimation.Fade;
GcTextBox1.DropDown.ButtonImage = "~/Images/DropDown.png";
GcTextBox1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png";

また、TouchDropDownScaleプロパティを使用して、タッチ操作時のドロップダウンエディットの拡大倍率を設定することができます。詳細については「ドロップダウンウィンドウの拡大表示」を参照してください。
クライアント側スクリプト

ドロップダウンエディットのクライアントスクリプトメンバを使用すると、サーバーにポストバックすることなく、様々な処理がクライアント側で行えます。 ドロップダウンエディットのクライアント側オブジェクトの取得は、テキストコントロールのGetDropDownEditorメソッドを使用するか、イベントハンドラのパラメータを利用します。

次のサンプルコードでは、イベントハンドラのパラメータを利用してドロップダウンエディットに10バイト以上の文字が入力されると背景色を変更します。

<DropDownEditor>
    <ClientEvents KeyUp="GcTextBox1DropDown_KeyUp"/>
</DropDownEditor>
function GcTextBox1DropDown_KeyUp(sender, eArgs)
{
    if(GetByteCount(sender.GetText()) &gt; 9)
    {
        sender.SetBackColor("orange");
    }
    else
    {
        sender.SetBackColor("white");
    }
}
参照

 

 


© 2005-2015 GrapeCity inc. All rights reserved.