[]
        
(Showing Draft Content)

Wijmo_Input.Multiselect

MultiSelect クラス

MultiSelect コントロールを使用すると、カスタムオブジェクトや単純な文字列を 含むドロップダウンリストから複数の項目を選択できます。

MultiSelect コントロールはComboBox を拡張し、 MultiSelect.itemsSourceMultiSelect.displayMemberPath などの 通常のプロパティをすべて含みます。

また、ListBox コントロールと同様に、項目がオンになっているかどうかを 特定するためのプロパティの名前を定義するMultiSelect.checkedMemberPath プロパティを持ちます。

現在オンの(選択されている)項目は、 MultiSelect.checkedItems プロパティを使用して取得できます。

コントロールヘッダーは自由にカスタマイズできます。デフォルトでは、コントロールヘッダーには、 選択されている項目が2つまで表示され、その後に項目数が表示されます。表示する最大項目数(MultiSelect.maxHeaderItems )、 選択項目がない場合に表示されるメッセージ(MultiSelect.placeholder )、 および項目数の表示に使用する書式文字列(MultiSelect.headerFormat ) を変更できます。

アプリケーションに必要な条件に基づいてヘッダーコンテンツを生成する関数を 提供することもできます(MultiSelect.headerFormatter )。

次の例では、MultiSelect コントロールを使用してドロップダウンリストから複数の項目を選択する方法を示しています。

Example

階層

コンストラクタ

constructor

  • new MultiSelect(element: any, options?: any): MultiSelect
  • MultiSelect クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 MultiSelect

プロパティ

autoExpandSelection

autoExpandSelection: boolean

コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

checkedItems

checkedItems: any[]

現在チェックされている項目を含む配列を取得または設定します。

checkedMemberPath

checkedMemberPath: string

各項目の隣に配置したチェックボックスを制限するために使用されるプロパティの名前を取得または設定します。

collectionView

collectionView: ICollectionView

項目ソースとして使用されるICollectionView オブジェクトを取得します。

displayMemberPath

displayMemberPath: string

項目の視覚表示として使用するプロパティの名前を取得または設定します。

dropDown

dropDown: HTMLElement

isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。

dropDownCssClass

dropDownCssClass: string

コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。

このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。 ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、 親コントロールに基づいてCSSセレクタを使用することができないためです。

headerFormat

headerFormat: string

コントロールでmaxHeaderItems の数を超える項目がチェックされているときに ヘッダの内容の作成に使用される書式文字列を取得または設定します。

書式文字列は、'{count}'の置換文字列が含まれて、 現在にチェックされた項目数と置き換えます。 英語カルチャでは、このプロパティのデフォルト値は'{count:n0} items selected'です。

headerFormatter

headerFormatter: Function

コントロールのヘッダに表示されるテキストを得る関数を取得または設定します。

デフォルトでは、コントロールのヘッダの内容はplaceholdermaxHeaderItems、 および現在の選択に基づいて決定しますアプリケーションの基準に基づいて、 カスタム文字列を返す関数を指定すると、 ヘッダ内容のカスタマイズができます。

headerPath

headerPath: string

コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。

このプロパティのデフォルト値はnullです。この場合、コントロールは、 ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。

入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。

inputElement

inputElement: HTMLInputElement

コントロールによってホストされているHTML入力要素を取得します。

このプロパティは、入力要素の属性をカスタマイズする場合に使用します。

inputType

inputType: string

コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。

このプロパティのデフォルト値はtextです。

isAnimated

isAnimated: boolean

ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isContentHtml

isContentHtml: boolean

ドロップダウンリストに項目をプレーンテキストとして表示するか、HTMLとして表示するかを 示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isDroppedDown

isDroppedDown: boolean

ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isEditable

isEditable: boolean

入力要素の内容をitemsSource コレクション内の項目に 制限するかどうかを決定する値を取得または設定します。

このプロパティは、デフォルトで ComboBox コントロールに対してfalseに設定され、AutoComplete および InputTime コントロールに対してtrueに設定されます。

isRequired

isRequired: boolean

コントロール値をnull以外の値に設定する必要があるか、 それとも(コントロールのコンテンツを削除することで)nullに設定できるかを 決定する値を取得または設定します。

このプロパティは、{@ link ComboBox}、{@ link InputDate}、{@ link InputTime}、{@ link InputDateTime}、 およびInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoComplete コントロールに対してデフォルトでfalseに設定されます。

itemFormatter

itemFormatter: Function

ドロップダウンリストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを 受け取り、表示する新しいテキストまたはHTMLを返します。

書式設定関数がスコープ(意味のある'this'値など)を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。次に例を示します。

  comboBox.itemFormatter = customItemFormatter.bind(this);
  function customItemFormatter(index, content) {
    if (this.makeItemBold(index)) {
      content = '<b>' + content + '</b>';
    }
    return content;
  }

itemsSource

itemsSource: any

選択リストの項目を含む配列またはICollectionView オブジェクトを取得または設定します。

このプロパティを配列に設定すると、ComboBoxComboBox.collectionView プロパティによって公開される内部 ICollectionView オブジェクトを作成します。

ComboBox の選択は、その ComboBox.collectionView 内の現在の項目によって決定されます。デフォルトでは、コレクションの最初の項目に設定されます。 この動作を変更するには、ComboBox.collectionView の {@link wijmo.collections.CollectionView.currentItem} プロパティをnullに設定します。

listBox

listBox: ListBox

ドロップダウンに示されているListBox コントロールを取得します。

maxDropDownHeight

maxDropDownHeight: number

ドロップダウンリストの最大の高さを取得または設定します。

maxDropDownWidth

maxDropDownWidth: number

ドロップダウンリストの最大の幅を取得または設定します。

ドロップダウンリストの幅は、コントロール自体の幅によっても制限されます (その値はドロップダウンの最小幅を表します)。

maxHeaderItems

maxHeaderItems: number

コントロールのヘッダに表示する項目の最大数を取得または設定します。

項目が選択されていない場合、ヘッダが、placeholder プロパティで 指定されたテキストが表示されます。

選択された項目の数は、maxHeaderItems プロパティの値より以下に ある場合、選択された項目はヘッダに示します。

選択された項目の数は、maxHeaderItems プロパティの値より大きい場合、 ヘッダは選択された項目ではなく、項目数表示します。

placeholder

placeholder: string

コントロールが空のときにヒントとして表示される文字列を取得または設定します。

selectAllLabel

selectAllLabel: string

showSelectAllCheckbox プロパティがtrueに設定されている場合、 表示される「すべて選択」チェックボックスのラベルとして使用する 文字列を取得または設定します。

このプロパティはデフォルトでnullに設定されます。 これにより、コントロールには、ローカライズ化された文字列 「すべて選択」が表示されます。.

selectedIndex

selectedIndex: number

ドロップダウンリストで現在選択されている項目のインデックスを取得または設定します。

selectedItem

selectedItem: any

ドロップダウンリストで現在選択されている項目を取得または設定します。

selectedValue

selectedValue: any

selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。

selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。 itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。

selectedValuePath

selectedValuePath: string

selectedValueselectedItem から取得するために使用するプロパティの名前を 取得または設定します。

showDropDownButton

showDropDownButton: boolean

コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

showGroups

showGroups: boolean

データグループを区切るためにドロップダウン ListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。

データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。

このプロパティのデフォルト値はfalseです。

showSelectAllCheckbox

showSelectAllCheckbox: boolean

コントロールのすべての項目を選択または選択解除するために、項目の上に「すべて選択」チェックボックスを表示するかどうかを取得または設定します。

このプロパティのデフォルト値はfalse です。

text

text: string

コントロールに表示されるテキストを取得または設定します。

trimText

trimText: boolean

先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値は trueです。

ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。

  .wj-listbox-item {
     white-space: pre;
  }

静的 controlTemplate

controlTemplate: string

DropDown コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

getDisplayText

  • getDisplayText(index?: number): string
  • 指定したインデックスにある項目に対して表示される文字列を(プレーンテキストとして)取得します。

    引数

    • オプション index: number

      テキストを取得する項目のインデックス。

    戻り値 string

indexOf

  • indexOf(text: string, fullMatch: boolean): number
  • 指定した文字列と一致する最初の項目のインデックスを取得します。

    引数

    • text: string

      検索するテキスト。

    • fullMatch: boolean

      完全一致で検索するか、前方一致で検索するか。

    戻り値 number

    The index of the item, or -1 if not found.

onCheckedItemsChanged

onItemsSourceChanged

onSelectedIndexChanged

  • onSelectedIndexChanged(e?: EventArgs): void

onTextChanged

selectAll

  • selectAll(): void
  • コントロールにフォーカスを設定してそのすべての内容を選択します。

    戻り値 void

イベント

checkedItemsChanged

checkedItemsChanged: Event

checkedItems プロパティの値が変更されたときに発生します。

formatItem

formatItem: Event

ドロップダウンリストの項目が作成されると発生するイベント。

このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。

isDroppedDownChanged

isDroppedDownChanged: Event

ドロップダウンが表示または非表示になった後に発生します。

isDroppedDownChanging

isDroppedDownChanging: Event

ドロップダウンが表示または非表示になる前に発生します。

itemsSourceChanged

itemsSourceChanged: Event

itemsSource プロパティの値が変化すると発生します。

selectedIndexChanged

selectedIndexChanged: Event

selectedIndex プロパティの値が変更されたときに発生します。

textChanged

textChanged: Event

text プロパティの値が変更されたときに発生します。