[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Angular2_Nav.Wjtreeview

WjTreeView クラス

wijmo.nav.TreeView コントロールに対応するAngular 2コンポーネント。

wj-tree-viewコンポーネントを使用して、Angular 2アプリケーションにTreeViewコントロールを 追加できます。Angular 2マークアップの構文については、 「Angular 2マークアップ構文」を参照してください。

WjTreeViewコンポーネントは、TreeViewコントロールから派生され、 そのすべてのプロパティ、イベント、およびメソッドを継承しています。

階層

プロパティ

メソッド

イベント

プロパティ

allowDragging

allowDragging: boolean

ユーザーがTreeView 内でノードをドラッグアンドドロップできるかどうかを指定する値を取得または設定します。

asyncBindings

asyncBindings: boolean

この特定のコンポーネントのグローバルなWjOptions.asyncBindingsの設定をオーバーライドできます。 詳細については、WjOptions. WjOptions.asyncBindings　プロパティの説明を参照してください。

autoCollapse

autoCollapse: boolean

ノードが展開されたときに、兄弟ノードを折りたたむかどうかを指定する値を 取得または設定します。

このプロパティは、デフォルトでは trueに設定されています。 通常は、使用していないノードを折りたたんだ方がUIがすっきりするためです。

checkOnClick

checkOnClick: boolean

ユーザーがノードヘッダーをクリックしたときに、チェックボックスを切り替えるかどうかを指定する値を取得または設定します。

このプロパティのデフォルト値は falseです。これにより、ユーザーがノードヘッダーではなく チェックボックス自体をクリックした場合にのみチェックボックスのオン・オフが切り替わります。

showCheckboxes プロパティと checkedItemsChanged イベントを参照してください。

checkedItems

checkedItems: any[]

現在オンに設定されている項目が含まれる配列を取得または設定します。

返される配列には、子を持たない項目だけが含まれます。 これは、親項目のチェックボックスが子項目のオンまたはオフに 使用されるからです。

showCheckboxes プロパティと checkedItemsChanged イベントも参照してください。

次に例を示します。

import { TreeView } from '@grapecity/wijmo.nav';
var treeViewChk = new TreeView('#gsTreeViewChk', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   showCheckboxes: true,
   itemsSource: items,
   checkedItemsChanged: function (s, e) {
       var items = s.checkedItems,
           msg = '';
       if (items.length) {
           msg = '<p><b>Selected Items:</b></p><ol>\r\n';
           for (var i = 0; i < items.length; i++) {
               msg += '<li>' + items[i].header + '</li>\r\n';
           }
           msg += '</ol>';
       }
       document.getElementById('gsTreeViewChkStatus').innerHTML = msg;
   }
});

checkedItemsChangedNg

checkedItemsChangedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo checkedItemsChangedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のcheckedItemsChanged Wijmoイベント名を使用してください。

checkedMemberPath

checkedMemberPath: string | string[]

ノードのチェック状態にバインドする1つ以上のプロパティの名前を取得または設定します。

showCheckboxes プロパティと checkedItemsChanged イベントも参照してください。

childItemsPath

childItemsPath: string | string[]

各ノードの子項目を含む1つ以上のプロパティの名前を 取得または設定します。

このプロパティのデフォルト値は文字列'items'です。

ほとんどの場合、子項目を含むプロパティは、 ツリーのすべてのデータ項目で同じです。このような場合は、 childItemsPath にその名前を設定します。

ただし、項目のレベルごとに異なるプロパティを使用して 子項目を保存する場合もあります。たとえば、カテゴリ、製品、注文から成る ツリーがあるとします。その場合に、 childItemsPath に次のような配列を設定します。

// カテゴリ、製品、注文のヘッダーがそれぞれ異なります
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];

displayMemberPath

displayMemberPath: string | string[]

ノードのビジュアル表現として使用される1つ以上のプロパティの名前を 取得または設定します。

このプロパティのデフォルト値は文字列'header'です。

ほとんどの場合、ノードテキストを含むプロパティは、 ツリーのすべてのデータ項目で同じです。このような場合は、 displayMemberPath にその名前を設定します。

ただし、項目のレベルごとに異なるプロパティを使用して ノードテキストを表す場合もあります。たとえば、カテゴリ、製品、注文から成る ツリーがあるとします。その場合に、 displayMemberPath に次のような配列を設定します。

// カテゴリ、製品、注文のヘッダーがそれぞれ異なります
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];

dragEndNg

dragEndNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo dragEndイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のdragEnd Wijmoイベント名を使用してください。

dragOverNg

dragOverNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo dragOverイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のdragOver Wijmoイベント名を使用してください。

dragStartNg

dragStartNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo dragStartイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のdragStart Wijmoイベント名を使用してください。

dropNg

dropNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo dropイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のdrop Wijmoイベント名を使用してください。

expandOnClick

expandOnClick: boolean

ユーザーがノードヘッダーをクリックしたときに、折りたたまれているノードを展開するかどうかを指定する値を取得または設定します。

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

expandOnLoad

expandOnLoad: boolean

ツリーがロードされたときに最初のノードを自動的に 展開するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値は true です。 falseに設定された場合、すべてのノードが折りたたんだ状態で表示されます。

formatItemNg

formatItemNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo formatItemイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のformatItem Wijmoイベント名を使用してください。

gotFocusNg

gotFocusNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo gotFocusイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のgotFocus Wijmoイベント名を使用してください。

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

imageMemberPath

imageMemberPath: string | string[]

ノードの画像のソースとして使用する1つ以上のプロパティの名前を 取得または設定します。

このプロパティのデフォルト値は空の文字列です。これは、ノードに画像が追加されないことを示します。

initialized

initialized: EventEmitter<any>

このイベントは、コンポーネントがAngularによって初期化された後、つまり すべての連結プロパティが割り当てられ、子コンポーネント（ある場合）が初期化された後にトリガされます。

invalidInputNg

invalidInputNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo invalidInputイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のinvalidInput Wijmoイベント名を使用してください。

isAnimated

isAnimated: boolean

ノードを展開または折りたたむときにアニメーションを使用するかどうかを示す値を取得または設定します。

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

isCheckedChangedNg

isCheckedChangedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo isCheckedChangedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のisCheckedChanged Wijmoイベント名を使用してください。

isCheckedChangingNg

isCheckedChangingNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo isCheckedChangingイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のisCheckedChanging Wijmoイベント名を使用してください。

isCollapsedChangedNg

isCollapsedChangedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo isCollapsedChangedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のisCollapsedChanged Wijmoイベント名を使用してください。

isCollapsedChangingNg

isCollapsedChangingNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo isCollapsedChangingイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のisCollapsedChanging Wijmoイベント名を使用してください。

isContentHtml

isContentHtml: boolean

項目をプレーンテキストまたはHTMLに連結するかどうかを示す値を取得または設定します。

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

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isInitialized

isInitialized: boolean

コンポーネントがAngularによって初期化されているかどうかを示します。 この値は、initializedイベントをトリガする直前にfalseからtrueになります。

isReadOnly

isReadOnly: boolean

ユーザーがノードのテキストを編集できるかどうかを指定する値を取得または設定します。

isReadOnly プロパティをfalseに設定すると、ノードに直接入力することで ツリーノードのコンテンツを編集することができます。ノードのコンテンツ全体を選択した状態で、 ［F2］キーを使用して編集モードに入ることもできます。 次のメソッドとイベントを使用して、編集動作をカスタマイズできます。

メソッド：: startEditing、 finishEditing.

イベント: nodeEditStarting、 nodeEditStarted、 nodeEditEnding、 nodeEditEnded。

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

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

itemClickedNg

itemClickedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo itemClickedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のitemClicked Wijmoイベント名を使用してください。

itemsSource

itemsSource: any[]

TreeView 項目を含む配列を取得または設定します。

TreeView itemsSource 配列は一般に、 子項目を含む項目から成る階層構造を持ちます。項目の深さに制限はありません。

たとえば、次の配列は、それぞれが2つの子ノードを持つ 3つの最上位ノードを含むツリーを生成します。

import { TreeView } from '@grapecity/wijmo.nav';
var tree = new TreeView('#treeView', {
    displayMemberPath: 'header',
    childItemsPath: 'items',
    itemsSource: [
        { header: '1 first', items: [
            { header: '1.1 first child' },
            { header: '1.2 second child' },
        ] },
        { header: '2 second', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] },
        { header: '3 third', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] }
    ]
});

itemsSourceChangedNg

itemsSourceChangedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo itemsSourceChangedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のitemsSourceChanged Wijmoイベント名を使用してください。

lazyLoadFunction

lazyLoadFunction: ILazyLoad

オンデマンドで子ノードをロードする関数を取得または設定します。

lazyLoadFunction は、2つのパラメータとして、展開されるノードと、 データが取得可能になったときに呼び出されるコールバックを 受け取ります。

コールバック関数は、TreeView にノードのロードプロセスが 完了したことを通知します。データのロード時にエラーがあっても、 コールバックは必ず呼び出されます。

次に例を示します。

import { TreeView } from '@grapecity/wijmo.nav';
var treeViewLazyLoad = new TreeView('#treeViewLazyLoad', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   itemsSource: [ // 3つの遅延ロードノードから開始します
       { header: 'Lazy Node 1', items: []},
       { header: 'Lazy Node 2', items: [] },
       { header: 'Lazy Node 3', items: [] }
   ],
   lazyLoadFunction: function (node, callback) {
       setTimeout(function () { // httpの遅延をシミュレーションします
           var result = [ // 結果をシミュレーションします
               { header: 'Another lazy node...', items: [] },
               { header: 'A non-lazy node without children' },
               { header: 'A non-lazy node with child nodes', items: [
                 { header: 'hello' },
                 { header: 'world' }
               ]}
           ];
           callback(result); // コントロールに結果を返します
       }, 2500); // 2.5秒のhttpの遅延をシミュレーションします
   }
});

遅延ロードノードを含むツリーには、それぞれのノードにチェックボックスが ないことがある（showCheckboxes プロパティを参照）、 {@link collpaseToLevel} メソッドがまだロードされていない折りたたみ ノードを展開しない、といった制限があります。

loadedItemsNg

loadedItemsNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo loadedItemsイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のloadedItems Wijmoイベント名を使用してください。

loadingItemsNg

loadingItemsNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo loadingItemsイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のloadingItems Wijmoイベント名を使用してください。

lostFocusNg

lostFocusNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo lostFocusイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のlostFocus Wijmoイベント名を使用してください。

nodeEditEndedNg

nodeEditEndedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo nodeEditEndedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のnodeEditEnded Wijmoイベント名を使用してください。

nodeEditEndingNg

nodeEditEndingNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo nodeEditEndingイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のnodeEditEnding Wijmoイベント名を使用してください。

nodeEditStartedNg

nodeEditStartedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo nodeEditStartedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のnodeEditStarted Wijmoイベント名を使用してください。

nodeEditStartingNg

nodeEditStartingNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo nodeEditStartingイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のnodeEditStarting Wijmoイベント名を使用してください。

nodes

nodes: TreeNode[]

現在ロードされているノードを表すTreeNode オブジェクトの配列を取得します。

refreshedNg

refreshedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo refreshedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のrefreshed Wijmoイベント名を使用してください。

refreshingNg

refreshingNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo refreshingイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のrefreshing Wijmoイベント名を使用してください。

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

selectedItem

selectedItem: any

現在選択されているデータ項目を取得または設定します。

selectedItemChangedNg

selectedItemChangedNg: EventEmitter<any>

プログラムによるアクセスに使用されるWijmo selectedItemChangedイベントのAngular（EventEmitter）バージョン。 コードでこのイベントのAngularバージョンをサブスクライブする場合は、このイベント名を使用してください。 テンプレート連結では、通常のselectedItemChanged Wijmoイベント名を使用してください。

selectedNode

selectedNode: TreeNode

現在選択されているTreeNode を取得または設定します。

selectedPath

selectedPath: string[]

ルートから現在選択されているノードまでのすべてのノードのテキストが 入った配列を取得します。

showCheckboxes

showCheckboxes: boolean

TreeView で、ノードにチェックボックスを追加し、その状態を管理するかどうかを決定する値を 取得または設定します。

このプロパティは、遅延ロードノードがないツリーでのみ使用できます （lazyLoadFunction プロパティを参照）。

checkedItems プロパティとcheckedItemsChanged イベントも参照してください。

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

totalItemCount

totalItemCount: number

ツリー内の項目の総数を取得します。

wjModelProperty

wjModelProperty: string

[(ngModel)]ディレクティブ（指定されている場合）によって表されるプロパティの名前を定義します。 デフォルト値は''です。

静的 controlTemplate

controlTemplate: string

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

メソッド

addChildNode

  • addChildNode(index: number, dataItem: any): TreeNode

  • 特定の位置に子ノードを追加します。

    引数

    • index: number

      新しい子ノードのインデックス。

    • dataItem: any

      新しいノードの作成に使用されるデータ項目。

    戻り値 TreeNode

    追加されたTreeNode。

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。

    以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', templateString, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    @param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    引数

    • classNames: string
    • template: string
    • parts: Object
    • オプション namePart: string

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

checkAllItems

  • checkAllItems(check: boolean): void

  • ツリーのすべてのチェックボックスをオンまたはオフにします。

    引数

    • check: boolean

      すべてのチェックボックスをオンまたはオフにするかどうか。

    戻り値 void

collapseToLevel

  • collapseToLevel(level: number): void

  • すべてのツリー項目を指定されたレベルまで折りたたみます。

    通常、このメソッドは一度に複数のノードを展開または折りたたみます。 ただし、どのノードにも遅延ロードを実行しないので、 遅延ロードする必要がある折りたたみノードは展開されません。

    引数

    • level: number

      表示する最大ノードレベル。

    戻り値 void

containsFocus

  • containsFocus(): boolean

  • このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

    戻り値 boolean

created

  • created(): void

  • Wijmoコンポーネントから継承されるカスタムコンポーネントを作成する場合は、このメソッドを
    オーバーライドして、通常はクラスコンストラクタで行う必要な初期化を行うことができます。 このメソッドは、Wijmoコンポーネントコンストラクタの最後の行で呼び出され、 カスタムコンポーネントのコンストラクタを宣言しなくて済むようにします。これにより、 コンストラクタのパラメータを保持したり、Wijmoコンポーネントのコンストラクタパラメータとの同期を維持する必要がなくなります。

    戻り値 void

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

  • ホスト要素との関連付けを解除することによってコントロールを破棄します。

    dispose メソッドは、addEventListener メソッドによって 追加されたイベントリスナーを自動的に削除します。

    コントロールを動的に作成および削除するアプリケーションでは、 dispose メソッドを呼び出すことが重要です。 コントロールを破棄しないと、 メモリリークが発生する可能があります。

    戻り値 void

endUpdate

  • endUpdate(): void

finishEditing

  • finishEditing(cancel?: boolean): boolean

  • 保留中の編集をすべてコミットし、編集モードを終了します。

    引数

    • オプション cancel: boolean

      保留中の編集をキャンセルするかコミットするか。

    戻り値 boolean

    編集操作が正常に終了した場合はTrue。

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

getFirstNode

  • getFirstNode(visible?: boolean, enabled?: boolean): TreeNode

  • TreeView の最初のTreeNode への参照を取得します。

    引数

    • オプション visible: boolean

      可視のノード（祖先ノードが折りたたまれていない）だけを返すかどうか。

    • オプション enabled: boolean

      有効なノード（祖先ノードが無効でない）だけを返すかどうか。

    戻り値 TreeNode

getLastNode

  • getLastNode(visible?: boolean, enabled?: boolean): TreeNode

  • TreeView の最後のTreeNode への参照を取得します。

    引数

    • オプション visible: boolean

      可視のノード（祖先ノードが折りたたまれていない）だけを返すかどうか。

    • オプション enabled: boolean

      有効なノード（祖先ノードが無効でない）だけを返すかどうか。

    戻り値 TreeNode

getNode

  • 特定のデータ項目を表すTreeNode オブジェクトを取得します。

    引数

    • item: any

      検索するデータ項目。

    戻り値 TreeNode

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});

// 以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外を発生します。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうか。

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

loadTree

  • loadTree(preserveOutlineState?: boolean): void

  • 現在のitemsSource　のデータを使用してツリーをロードします。

    引数

    • オプション preserveOutlineState: boolean

      ツリーのデータをロードするときにアウトラインの状態を保持するかどうか。

    戻り値 void

onCheckedItemsChanged

onDragEnd

onDragOver

onDragStart

onDrop

onFormatItem

onGotFocus

onInvalidInput

  • invalidInput イベントを発生させます。

    イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。

    引数

    戻り値 boolean

onIsCheckedChanged

onIsCheckedChanging

onIsCollapsedChanged

onIsCollapsedChanging

onItemClicked

onItemsSourceChanged

onLoadedItems

onLoadingItems

onLostFocus

onNodeEditEnded

onNodeEditEnding

onNodeEditStarted

onNodeEditStarting

onRefreshed

onRefreshing

onSelectedItemChanged

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

refresh

  • refresh(fullUpdate?: boolean): void

  • ツリーを再作成するためにオーバーライドされます。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうかを示します。

    戻り値 void

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    削除されたリスナーの数。

startEditing

  • startEditing(node?: TreeNode): boolean

  • 特定のTreeNode の編集を開始します。

    引数

    • オプション node: TreeNode

      編集するTreeNode。 指定しない場合は、現在選択されているノードが使用されます。

    戻り値 boolean

    編集操作が正常に開始された場合はTrue。

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

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

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

checkedItemsChanged

checkedItemsChanged: Event<TreeView, EventArgs>

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

showCheckboxes プロパティおよびcheckOnClick プロパティも参照してください。

dragEnd

dragEnd: Event<TreeView, EventArgs>

マウスまたはキーボードでノードを別の位置にドロップするか、操作をキャンセルして、 ドラッグ/ドロップ操作を終了すると発生します。

dragOver

dragOver: Event<TreeView, TreeNodeDragDropEventArgs>

ユーザーがTreeView で1つのノードを他のノードの上にドラッグしているときに発生します。

このイベントは、allowDragging プロパティがtrueに設定されている場合にのみ発生します。

イベントのcancel パラメータをtrueに設定することで、 特定のノードや位置の上にドロップできないようにすることができます。

dragStart

dragStart: Event<TreeView, TreeNodeEventArgs>

ユーザーが行のドラッグを開始するときに発生します。

このイベントは、allowDragging プロパティがtrueに設定されている場合にのみ発生します。

イベントのcancelパラメータをtrueに設定することで、 ノードをドラッグできないようにすることができます。

drop

drop: Event<TreeView, TreeNodeDragDropEventArgs>

ユーザーがTreeView でノードをドロップしたときに発生します。

returns

True if the event was not canceled.

formatItem

formatItem: Event<TreeView, FormatNodeEventArgs>

ノードを表す要素が作成されたときに発生します。

このイベントを使用して、表示するノードを書式設定できます。

次の例は、formatItemイベントを使用して、ツリーの新しい項目の右側に "new"バッジを追加します。

import { TreeView } from '@grapecity/wijmo.nav';
var treeViewFmtItem = new TreeView('#treeViewFmtItem', {
    displayMemberPath: 'header',
    childItemsPath: 'items',
    itemsSource: items,
    formatItem: function (s, e) {
        if (e.dataItem.newItem) {
            e.element.innerHTML +=
                '&lt;img style="margin-left:6px" src="resources/new.png"/&gt;';
        }
    }
});

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

invalidInput

invalidInput: Event<Control, CancelEventArgs>

無効な文字が入力されたときに発生します。

ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。

イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。

イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。

isCheckedChanged

isCheckedChanged: Event<TreeView, TreeNodeEventArgs>

TreeNode.isChecked プロパティの値が変化した後に発生します。

isCheckedChanging

isCheckedChanging: Event<TreeView, TreeNodeEventArgs>

TreeNode.isChecked プロパティの値が変化する前に発生します。

isCollapsedChanged

isCollapsedChanged: Event<TreeView, TreeNodeEventArgs>

TreeNode.isCollapsed プロパティの値が変化した後に発生します。

isCollapsedChanging

isCollapsedChanging: Event<TreeView, TreeNodeEventArgs>

TreeNode.isCollapsed プロパティの値が変化する前に発生します。

itemClicked

itemClicked: Event<TreeView, EventArgs>

ユーザーが項目をクリックするか、［Enter］キーを押して、項目が選択されたときに発生します。

通常、このイベントはナビゲーションツリーで使用されます。selectedItem プロパティを使用して、クリックされた項目を取得します。

itemsSourceChanged

itemsSourceChanged: Event<TreeView, EventArgs>

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

loadedItems

loadedItems: Event<TreeView, EventArgs>

ツリー項目が生成された後に発生します。

loadingItems

loadingItems: Event<TreeView, CancelEventArgs>

ツリー項目が生成される前に発生します。

lostFocus

lostFocus: Event<Control, EventArgs>

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

nodeEditEnded

nodeEditEnded: Event<TreeView, TreeNodeEventArgs>

TreeNode が編集モードを出た後に発生します。

nodeEditEnding

nodeEditEnding: Event<TreeView, TreeNodeEventArgs>

TreeNode が編集モードを出る前に発生します。

nodeEditStarted

nodeEditStarted: Event<TreeView, TreeNodeEventArgs>

TreeNode が編集モードに入った後に発生します。

nodeEditStarting

nodeEditStarting: Event<TreeView, TreeNodeEventArgs>

TreeNode が編集モードに入る前に発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

selectedItemChanged

selectedItemChanged: Event<TreeView, EventArgs>

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