[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Inputman.GcTagBox

GcTagBox クラス

タグボックスコントロールの設定情報を定義します。

階層

  • GcTagBox

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • let gcTagBox = new GC.InputMan.GcTagBox(document.getElementById('tagbox1'), {
   items: products,
   width: 400,
   height: 80,
});

    引数

    • ele: HTMLElement

      コントロールのコンテナとなるHTML要素

    • オプション option: TagBoxConfig

      GcTagBoxを初期化するための設定です。

    戻り値 GcTagBox

プロパティ

allowCopyTag

allowCopyTag: boolean

コピー可能かどうかを取得または設定します。

allowCustomTag

allowCustomTag: boolean

カスタムタグを追加可能かどうかを取得または設定します。

読み取り専用 allowDragTag

allowDragTag: boolean

ドラッグ操作可能かどうかを取得します。

読み取り専用 allowDropDownResize

allowDropDownResize: boolean

ドロップダウンリストリサイズ可能かどうかを取得します。

allowResize

allowResize: boolean

リサイズ可能かどうかを取得または設定します。

allowSelectTag

allowSelectTag: boolean

選択可能かどうかを取得または設定します。

appendCustomTagToDropDown

appendCustomTagToDropDown: boolean

カスタムタグをドロップダウンリストに追加するかどうかを設定します。

applyCustomTagKey

applyCustomTagKey: Key

カスタムタグキーを適用するかどうかを取得または設定します。

読み取り専用 autoFilter

autoFilter: AutoFilter | null

自動フィルタを取得します。

autoSelect

autoSelect: boolean

自動選択モードを取得または設定します。

読み取り専用 componentName

componentName: string

container

container: HTMLElement

コントロールのコンテナを取得または設定します。

displayMode

displayMode: TagBoxDisplayMode

表示モードを取得または設定します。

dropDownAlignmentMode

dropDownAlignmentMode: GcTagBoxDropDownAlignmentMode

ドロップダウンリストの整列モードを取得または設定します。

読み取り専用 dropDownDisplayMemberPath

dropDownDisplayMemberPath: string

ドロップダウンリスト項目のパスを取得します。

読み取り専用 dropDownTree

dropDownTree: ITagBoxDropDownTree

ドロップダウンリストのツリービューのインスタンスを取得します。

読み取り専用 dropDownType

dropDownType: TagBoxDropDownType

ドロップダウンリストの表示形式を取得します。

enabled

enabled: boolean

有効化モードを取得または設定します。

floatingLabelDirection

floatingLabelDirection: FloatingLabelDirection

フローティングラベルの表示位置を設定します。

floatingLabelText

floatingLabelText: string

フローティングラベルの表示テキストを設定します。

floatingLabelType

floatingLabelType: FloatingLabelType

フローティングラベルの表示パターンを設定します。

読み取り専用 focused

focused: boolean

フォーカスを取得します。

height

height: number

高さを取得または設定します。

imageAlignment

imageAlignment: GcTagImageAlignment

タグのアイコンの表示位置を設定または取得します。

読み取り専用 items

items: object[] | string[]

設定項目一覧を取得します。

maxHeight

maxHeight: number | string

最大高を取得または設定します。

読み取り専用 maxTagCount

maxTagCount: number

選択可能のタグの最大数を取得します。

読み取り専用 maxTagWidth

maxTagWidth: number

タグの最大幅を取得します。

maxWidth

maxWidth: number | string

最大幅を取得または設定します。

minHeight

minHeight: number | string

最小高を取得または設定します。

minWidth

minWidth: number | string

最小幅を取得または設定します。

readOnly

readOnly: boolean

読み取り専用モードを取得または設定します。

separator

separator: string

値を取得するときの区切りを取得または設定します。

showDropDown

showDropDown: boolean

ドロップダウンリストを表示するかどうかを取得または設定します。

showDropDownIfNoItems

showDropDownIfNoItems: boolean

項目がないとき、ドロップダウンリストを表示するかどうかを取得または設定します。

読み取り専用 showImage

showImage: boolean

表示画像を取得します。

読み取り専用 tagImageMemberPath

tagImageMemberPath: string | null

テンプレートに設定した画像のパスを取得します。

読み取り専用 tagTemplate

tagTemplate: string | ((args: any): HTMLElement )

タグテンプレートを取得します。

読み取り専用 tagTextMemberPath

tagTextMemberPath: string | null

テンプレートに設定したテキストのパスを取得します。

tagValidator

tagValidator: (args: any): boolean

バリデータを取得または設定します。

型宣言

    • (args: any): boolean

    • 引数

      • args: any

      戻り値 boolean

読み取り専用 tagsCount

tagsCount: number

タグ数を取得します。

text

text: string

テキストを取得または設定します。

読み取り専用 uniqueTags

uniqueTags: boolean

重複選択可能かどうかを取得します。

value

value: (object | string)[]

値をを取得または設定します。

watermarkDisplayNullText

watermarkDisplayNullText: string

タグボックスコントロールにフォーカスがあり未入力のときの代替テキストを設定または取得します。

watermarkNullText

watermarkNullText: string

タグボックスコントロールにフォーカスがなく未入力のときの代替テキストを設定または取得します。

width

width: number

幅を取得または設定します。

メソッド

addEventListener

  • addEventListener(eventName: GcTagBoxEvent, func: (sender: this, eventArgs?: object): void): void

  • タグボックスコントロールのイベントをバインドします。

    引数

    • eventName: GcTagBoxEvent

      イベント名

    • func: (sender: this, eventArgs?: object): void

      イベントが発生したときに実行する処理

      const insertTagHandler = function() {
    let value = gcTagBox.value;
    console.log(value);
}
gcTagBox.addEventListener(GC.InputMan.GcTagBoxEvent.InsertTag, insertTagHandler);
        • (sender: this, eventArgs?: object): void

        • 引数

          • sender: this
          • オプション eventArgs: object

          戻り値 void

    戻り値 void

appendTag

  • appendTag(tag: object | string): boolean

  • タグボックスエディタの最後に新しいタグ項目をに追加します。 InsertTagイベントが発生したときに実行されます。

    引数

    • tag: object | string

    戻り値 boolean

    イベントの実行結果を返します。

    const result = gcTagBox.appendTag("New Tag");

clear

  • clear(): boolean

  • GcTagBoxの全ての項目を削除します。 RemoveTagイベントが発生したときに実行されます。

    戻り値 boolean

    イベントの実行結果を返します。

    const result = gcTagBox.clear();

getDropDownHeight

  • getDropDownHeight(): number

  • タグボックスのドロップダウンリストの高さを取得します。ドロップダウンリストが表示される場合のみ取得可能。

    戻り値 number

    タグボックスのドロップダウンリストの高さを返します。

    const height = gcTagBox.getDropDownHeight();

getDropDownWidth

  • getDropDownWidth(): number

  • タグボックスのドロップダウンリストの幅を取得します。ドロップダウンリストが表示される場合のみ取得可能。

    戻り値 number

    タグボックスのドロップダウンリストの幅を返します。

    const width = gcTagBox.getDropDownWidth();

getDropDownWindow

  • タグボックスのドロップダウンリストを取得します。

    戻り値 ITagBoxDropDown

getElement

  • getElement(): HTMLElement

  • タグボックスの要素を取得します。

    戻り値 HTMLElement

insertTag

  • insertTag(tag: any, index: number): boolean

  • GcTagBoxの特定の位置にタグを挿入します。 InsertTagイベントが発生したときに実行されます。

    引数

    • tag: any

      挿入するタグの内容

    • index: number

      挿入位置のインデックス

    戻り値 boolean

    イベントの実行結果を返します。

    const result = gcTagBox.insertTag("New tag", 3);

removeEventListener

  • removeEventListener(eventName: GcTagBoxEvent, func: (sender: this, eventArgs?: object): void): void

  • タグボックスコントロールのイベントを解除します。

    引数

    • eventName: GcTagBoxEvent

      イベント名

    • func: (sender: this, eventArgs?: object): void

      イベントが発生したときに実行する処理

      const insertTagHandler = function() {
    let value = gcTagBox.value;
    console.log(value);
}
gcTagBox.removeEventListener(GC.InputMan.GcTagBoxEvent.InsertTag, insertTagHandler);
        • (sender: this, eventArgs?: object): void

        • 引数

          • sender: this
          • オプション eventArgs: object

          戻り値 void

    戻り値 void

removeTagAtIndex

  • removeTagAtIndex(index: number): boolean

  • GcTagBoxの特定の位置にタグを削除します。 RemoveTagイベントが発生したときに実行されます。

    引数

    • index: number

      削除位置のインデックス

    戻り値 boolean

    イベントの実行結果を返します。

    const result = gcTagBox.removeTagAtIndex(3);

イベント

DropDownClosed

  • DropDownClosed(sender: GcTagBox): void

  • タグボックスコントロールのドロップダウンリストを閉じるときに実行されます。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void

DropDownOpened

  • DropDownOpened(sender: GcTagBox): void

  • タグボックスコントロールのドロップダウンリストを開くときに実行されます。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void

FocusIn

  • タグボックスコントロールにフォーカスするときに実行されます。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void

FocusOut

  • タグボックスコントロールがフォーカスを失ったときに発生します。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void

InsertTag

  • タグボックスコントロールにタグを挿入したときに実行されます。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void

RemoveTag

  • タグボックスコントロールにタグを削除したときに実行されます。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    • e: GcTagBoxRemoveTagEventArgs

      イベントの種類を表す文字列（大文字と小文字を区別しません）

    戻り値 void

ValueChanged

  • タグボックスコントロールに保持する値が変更されたときに発生します。

    引数

    • sender: GcTagBox

      タグボックスコントロールで発生したイベント

    戻り値 void