数値コントロールに搭載されるドロップダウンボタンを押下すると、キーボードを使用しない入力を補助するドロップダウンオブジェクトが表示されます。数値コントロールにドロップダウン表示可能なオブジェクトは以下の2つです。詳細については、次のリンク先を参照してください。
DropDownプロパティが参照する
NumberDropDownオブジェクトは、コントロール上にドロップダウンボタンを表示させます。ドロップダウンボタンをクリックするか、キーボードで[Alt]+[↓]を押下することで、数値入力用のドロップダウンオブジェクトを表示できます。また、
ショートカットエクステンダには、デフォルトで[F7]キーがドロップダウン動作に割り当てられています。
ドロップダウン機能を有効にするには、DropDownオブジェクトの
EnabledプロパティをTrueに設定します。次に、
Visibleプロパティを設定してドロップダウンボタンを表示させます。
次のサンプルコードは、数値コントロールにドロップダウンボタンを設定する方法を示します。
GcNumber1.DropDown.Enabled = True
GcNumber1.DropDown.Visible = True
GcNumber1.DropDown.Enabled = true;
GcNumber1.DropDown.Visible = true;
なお、ドロップダウン機能を使用しない場合は、DateDropDown.EnabledプロパティをFalseに設定します。これにより、実行時にドロップダウンオブジェクトを形成するためのHTML生成やJSファイルの読み込みを回避することができるため、パフォーマンスが向上します。
クライアント側で、DropDownオブジェクトのEnabledプロパティがTrueに切り替えられたとき、必要となるドロップダウンオブジェクトのJSファイルは動的にダウンロードされます。
数値コントロールに表示可能なドロップダウンオブジェクトは以下の2種類で、どのドロップダウンオブジェクトを表示するかはNumberDropDownクラスのDropDownTypeプロパティを使用して設定します。既定値はNumberDropDownType.Calculatorです。
DropDownTypeの値 |
表示されるドロップダウンオブジェクト |
Calculator |
ドロップダウン電卓 |
NumericPad |
ドロップダウン数値パッド |
次のサンプルコードは、数値コントロールのドロップダウンオブジェクトに数値パッドを指定します。
GcNumber1.DropDown.DropDownType = GrapeCity.Web.Input.IMNumber.NumberDropDownType.NumericPad
GcNumber1.DropDown.DropDownType = GrapeCity.Web.Input.IMNumber.NumberDropDownType.NumericPad;
ページロード時にダウンロードされるドロップダウンオブジェクトの種類は、サーバー側DropDownTypeプロパティの初期設定に依存します。クライアント側でDropDownTypeプロパティが変更された場合は、変更後のドロップダウンオブジェクトに必要となるJSファイルが動的にダウンロードされます。
NumberDropDownオブジェクトを使用して、下記のドロップダウンボタンのカスタマイズが可能です。
次のサンプルコードは、ドロップダウンボタンをカスタマイズする例です。
Imports GrapeCity.Web.Input.Core
GcNumber1.DropDown.AutoDropDown = True
GcNumber1.DropDown.DropDownShadow = True
GcNumber1.DropDown.Position = ButtonPosition.Outside
GcNumber1.DropDown.ClosingAnimation = DropDownAnimation.Scroll
GcNumber1.DropDown.OpeningAnimation = DropDownAnimation.Fade
GcNumber1.DropDown.ButtonImage = "~/Images/DropDown.png"
GcNumber1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png"
using GrapeCity.Web.Input.Core;
GcNumber1.DropDown.AutoDropDown = true;
GcNumber1.DropDown.DropDownShadow = true;
GcNumber1.DropDown.Position = ButtonPosition.Outside;
GcNumber1.DropDown.ClosingAnimation = DropDownAnimation.Scroll;
GcNumber1.DropDown.OpeningAnimation = DropDownAnimation.Fade;
GcNumber1.DropDown.ButtonImage = "~/Images/DropDown.png";
GcNumber1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png";
また、
TouchDropDownScaleプロパティを使用して、タッチ操作時のドロップダウン電卓の拡大倍率を設定することができます。詳細については「
ドロップダウンウィンドウの拡大表示」を参照してください。