アクティブなノードが変更されたときに発生します。
グリッドが空のときに行 UI を追加するためのカスタム テンプレートを取得または設定します。
高度フィルタリングが UI で実行された後に発生されます。
列を自動生成するかどうかを取得または設定します。
親が削除されると子レコードも削除されるかどうかを表す @Input プロパティ。 デフォルトで true に設定されて、親とともにすべての子を削除します。
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
</igx-tree-grid>
セルがクリックされたときに発生します。
セルが編集された後に生成されます。
セルが編集され、編集が確定された後に発生します。
セルが編集モードに入るときに生成されます。
セルが編集モードを終了すると発生されます。
IgxTreeGridComponent の子データ キーを設定する @Input プロパティ。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
グリッドのコピー動作を制御します。
Apply the columns formatters (if any) on the data in the clipboard output.
Include the columns headers in the clipboard output.
Enables/disables the copy behavior
The separator used for formatting the copy output. Defaults to \t.
列が初期化されるときに発生します。
列移動操作のときに発生されます。
列移動が終了したときに発生されます。
列移動を開始したときに発生されます。
IgxColumnComponent がピン固定される前に発生されます。
IgxColumnComponent がピン固定された後に発生します。
列のサイズが変更された後に発生されます。
IgxColumnComponent が選択されたときに発生します。
列の表示状態が変更された後に発生されます。
列の表示状態が変更される前に発生されます。
セルが右クリックされたときに発生されます。
データ操作や再バインドなどにより、グリッドのデータ ビューが変更されるあとに発生されます。
データ操作や再バインドなどにより、グリッドのデータ ビューが変更される前に発生されます。
セルがダブルクリックされたときに発生されます。
ドラッグされている行 ID を取得します。
フィルターされたグリッドが空の場合に表示されるテンプレートのテンプレート参照。
グリッドが空の場合に表示されるテンプレートのテンプレート参照。
空の場合のカスタム テンプレートを取得または設定します。
行展開インジケーターをレンダリングするときに使用する必要があるカスタム テンプレート (存在する場合)。
フィルタリング式が適用される前に発生されます。
フィルタリングが UI で実行された後に発生されます。
フィルタリングが UI で実行された後に発生されます。
IgxTreeGridComponent の外部キーを設定する @Input プロパティ。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>
行/セルの編集で formGroup が作成されたときに発生します。
コピー操作が実行されたときに発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
グリッドが水平/垂直にスクロールされるときに発生します。
行に子があるかどうかを示すキーを設定する @Input プロパティ。 このプロパティは、ロードオンデマンドの場合のみ使用されます。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>
ヘッダー折りたたみインジケーターをレンダリングするときに使用する必要があるカスタム テンプレート (存在する場合)。
ヘッダー展開インジケーターをレンダリングするときに使用する必要があるカスタム テンプレート (存在する場合)。
id 属性の値を設定する @Input プロパティ。提供されていない場合は、自動的に生成されます。
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
読み込み時のカスタム テンプレートを取得または設定します。
列移動がグリッドで有効かどうかを制御します。
プライマリ キーを取得または設定します。
処理済み (フィルターとソート済み) のルートITreeGridRecord の配列のマップを返します。
// primaryKey=2 の処理済みレコードを取得します。
const states = this.grid.processedRecords.get(2);
処理済み (フィルターとソート済み) のルート ITreeGridRecord の配列を返します。
// index=2 の処理済みルート レコールドを取得します。
const states = this.grid.processedRootRecords[2];
範囲選択を行ったときに発生します。
すべての ITreeGridRecord のマップを返します。
// primaryKey=2 のルート レベルを取得します。
const states = this.grid.records.get(2);
ngAfterViewInit の後に発生します。この時点で、グリッドは DOM に存在します。
ITreeGridRecord のルート レベルの配列を返します。
// index=2 のルート レベルを取得します。
const states = this.grid.rootRecords[2];
新しく追加された行がコミットされる直前に発行します。
行が API によって追加されたときに発生されます。
グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。例:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
行折りたたみインジケーターをレンダリングするときに使用する必要があるカスタム テンプレート (存在する場合)。
行を削除するときに発行します。
行が API によって削除されたときに発生されます。
行をドロップしたときに発生されます。
行をドラッグし始めたときに発生します。
行の編集モードを終了するときに発生されます。
行の編集モードを終了し、編集が確定された後に発生します。
行が編集モードに入るときに生成されます。
行編集がキャンセルされるときに発生されます。
行展開インジケーターをレンダリングするときに使用する必要があるカスタム テンプレート (存在する場合)。
行のピン固定状態が変更されたときに呼び出されます。
行のピン固定状態が変更されたときに呼び出されます。
IgxGridRowComponent が選択されたときに発生します。
グリッドの行要素に条件付きスタイル プロパティを設定します。 キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
行の展開状態が変更されているときに呼び出されます。
セルが選択されたときに発生します。
グリッドの初期化後に列が自動で再生成されるかどうかを取得または設定します。
行追加の snackbar 通知の表示時間を取得/設定します。
列が昇順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
列が降順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
列がソートされていないと場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ソート式が適用される前に発生されます。
ソートが完了した後に発生されます。
ソートが実行された前に発生されます。
ユーザーがエクスポート処理が開始すると発生されます。
Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
グリッドの検証状態が変更されたときに発生します。
グリッドの編集時に使用される検証のトリガーを取得または設定します。
高度なフィルタリング状態を取得または設定します。
高度なフィルタリング状態を取得または設定します。
高度なフィルタリングが有効かどうかを示す値を取得または設定します。
高度なフィルタリングが有効かどうかを示す値を取得または設定します。
フィルタリングが有効かどうかを取得または設定します。
フィルタリングが有効かどうかを取得または設定します。
グリッドの一括編集が有効かどうかを取得または設定します。
一括編集が有効な場合、基になるデータは直接変更されません。
代わりに、トランザクションとして保存され、commit メソッドで後でコミットできます。
グリッドの一括編集が有効かどうかを取得または設定します。
一括編集が有効な場合、基になるデータは直接変更されません。
代わりに、トランザクションとして保存され、commit メソッドで後でコミットできます。
セル選択モードを取得または設定します。
セル選択モードを取得または設定します。
列選択モードを取得または設定します。
列選択モードを取得または設定します。
列のデフォルトの幅を取得または設定します。
列のデフォルトの幅を取得または設定します。
IgxColumnComponent の配列を取得します。
IgxTreeGridComponent にデータの配列をインポートする @Input プロパティ。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent にデータの配列をインポートする @Input プロパティ。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
編集モードのときにグリッドのデータ クローン ストラテジを取得または設定します。
編集モードのときにグリッドのデータ クローン ストラテジを取得または設定します。
現在描画されている IgxGridRowComponent のリスト。
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定/固定解除が適用された行データを返します。
IgxGridHeaderGroupComponent の最小許容幅を返します。
デフォルトの行の高さを取得します。
コンポーネントのテーマを返します。
デフォルト テーマは comfortable です。
利用可能なオプションは comfortable、cosy、および compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
カスタム テンプレートがある場合、行ドラッグのインジケーター アイコンを描画するために使用されます。
カスタム テンプレートがある場合、行ドラッグのインジケーター アイコンを描画するために使用されます。
グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。
グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。
レコードがない場合に表示されるメッセージを取得または設定します。
レコードがない場合に表示されるメッセージを取得または設定します。
IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。
デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。
デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
キーと値のペア [行 Id、展開状態] のリストを取得または設定します。
キーと値のペア [行 Id、展開状態] のリストを取得または設定します。
すべての IgxGridFilteringCellComponent のリスト。
フィルター モードを取得または設定します。
フィルター モードを取得または設定します。
グリッドのフィルタリング ストラテジを取得または設定します。
グリッドのフィルタリング ストラテジを取得または設定します。
IgxGridComponent のフィルター済みデータを含むオブジェクトの配列を返します。
let filteredData = this.grid.filteredData;
IgxGridComponent のフィルター済みデータを含むオブジェクトの配列を設定します。
this.grid.filteredData = [{
ID: 1,
Name: "A"
}];
フィルターされてソート済みのデータを含む配列を返します。
フィルタリング状態を取得または設定します。
フィルタリング状態を取得または設定します。
IgxGridComponent のフィルター ロジックを設定します。
IgxGridComponent のフィルター ロジックを設定します。
IgxGridComponent に列グループがあるかどうかを返します。
IgxGridComponent が複数行レイアウト定義用の列レイアウトを持っているかどうかを返します。
IgxGridComponent に編集可能な列があるかどうかを返します。
IgxGridComponent にフィルター可能な列があるかどうかを返します。
IgxGridComponent にグループ化可能な列があるかどうかを返します。
IgxGridComponent に移動可能な列があるかどうかを返します。
IgxGridComponent にソート可能な列があるかどうかを返します。
IgxGridComponent に集計可能な列があるかどうかを返します。
すべての IgxGridHeaderComponent のリスト。
すべての IgxGridHeaderGroupComponent のリスト。
ヘッダーの幅を取得または設定します。
高さを取得または設定します。
高さを取得または設定します。
非表示列の数を取得します。
行セレクターが非表示されているかどうかを取得または設定します。
行セレクターが非表示されているかどうかを取得または設定します。
グリッドは読み込みインジケータを表すかどうかを取得または設定します。
グリッドは読み込みインジケータを表すかどうかを取得または設定します。
ロケールを取得または設定します。
ロケールを取得または設定します。
ネイティブ要素を取得します。
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
ピン固定の IgxColumnComponent の配列を取得します。
ピン固定列の数を取得します。
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定が適用された行データを返します。
ピン固定の IgxRowComponent の配列を取得します。
ピン固定の IgxColumnComponent のコンテナーの現在幅を取得します。
初期のピン固定構成を取得または設定します。
初期のピン固定構成を取得または設定します。
リソース文字列を取得/設定します。
リソース文字列を取得/設定します。
行が移動可能かどうかを取得または設定します。
行が移動可能かどうかを取得または設定します。
行が編集可能かどうかを取得または設定します。
行が編集可能かどうかを取得または設定します。
行の高さを取得または設定します。
行の高さを取得または設定します。
IgxGridRowComponent のリスト。
ロードオンデマンドが有効になっているときに行ローディング インジケータのテンプレートを提供する @Input プロパティ。
```html
<ng-template #rowLoadingTemplate>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren" [rowLoadingIndicatorTemplate]="rowLoadingTemplate"> ```
ロードオンデマンドが有効になっているときに行ローディング インジケータのテンプレートを提供する @Input プロパティ。
```html
<ng-template #rowLoadingTemplate>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren" [rowLoadingIndicatorTemplate]="rowLoadingTemplate"> ```
行選択モードを取得または設定します。
行選択モードを取得または設定します。
行をクリックして選択/選択解除するかどうかを取得/設定します。
行をクリックして選択/選択解除するかどうかを取得/設定します。
選択されている IgxGridCell の配列を返します。
現在の選択状態を取得または設定します。
現在の選択状態を取得または設定します。
グループ化/親行が縮小されたときに集計行を表示するかどうかを制御します。
グループ化/親行が縮小されたときに集計行を表示するかどうかを制御します。
グリッドのソート ストラテジを取得または設定します。
グリッドのソート ストラテジを取得または設定します。
ソートの状態を取得または設定します。
ソートの状態を取得または設定します。
ソート オプション (単一または複数) を取得または設定します。
いずれかの mode プロパティを持つ ISortingOptions オブジェクトを受け入れます。
集計計算モードを取得または設定します。
集計計算モードを取得または設定します。
集計位置を取得または設定します。
集計位置を取得または設定します。
IgxSummaryRow の高さを取得または設定します。
IgxSummaryRow の高さを取得または設定します。
合計レコード数を返します。
合計レコード数を返します。
IgxGridComponent の合計幅を返します。
グリッドのためのトランザクション サービスを取得します。
ピン解除の IgxColumnComponent の配列を取得します。
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/固定解除が適用された行データを返します。
ピン解除の IgxColumnComponent のコンテナーの現在幅を取得します。
グリッド仮想化の状態を返します。
IgxColumnComponent の配列を返します。
グリッドの幅を取得または設定します。
グリッドの幅を取得または設定します。
parentRowID を指定しない場合、新しく作成された行はルート レベルに追加されます。 それ以外の場合、指定された parentRowID と一致する primaryKey を持つ行の子として追加されます。 parentRowID は存在しない場合、エラーを発生します。
const record = {
ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
Name: this.newRecord
};
this.grid.addRow(record, 1); // ID = 1 の行に新しい子行を追加します。
rowID で指定された行の下に UI を生成し、追加モードに入ります。
The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
Whether the record should be added as a child. Only applicable to igxTreeGrid.
インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。
The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
Whether the record should be added as a child. Only applicable to igxTreeGrid.
名前が提供された場合、対応する IgxColumnComponent のフィルター状態をクリアします。
セルのすべての強調表示を削除します。
名前が提供された場合、対応する IgxColumnComponent のソート状態をクリアします。
高度なフィルタリング ダイアログを閉じます。
indicates whether the changes should be applied
すべての行を縮小します。
this.grid.collapseAll();
ID によって行を縮小します。
The row id - primaryKey value or the data record instance.
プライマリキーによって IgxGridRowComponent および対応するデータ レコードを削除します。
すべての列の選択を解除します。
すべての行を選択解除します。
フィールドによって特定の列の選択を解除します。
指定した行を ID によって選択解除します。
指定した列で集計を無効にします。
指定した列で集計を有効にし、customSummary を適用します。
現在の行の行トランザクションを完成します。
すべての行を展開します。
this.grid.expandAll();
ID によって行を展開します。
The row id - primaryKey value or the data record instance.
単一の IgxColumnComponent をフィルターします。
同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
条件と一致する CellType を返します。
条件と一致する CellType を返します。
match any rowID
フィールド名によって IgxColumnComponent を返します。
IgxGridHeaderGroupComponent に設定される width を取得します。
特定の基準に一致する、現在位置に従って次のセルを
定義する ICellPosition を返します。
ピン固定領域の計算幅を取得します。
If we should take into account the hidden columns in the pinned area.
特定の基準に一致する、現在位置に従って次のセルを
定義する ICellPosition を返します。
インデックスで指定された IgxTreeGridRow を返します。
指定されたプライマリキーによって RowType オブジェクトを返します。
行コンポーネントに含まれているデータを返します。
correspond to rowID
現在の列選択の配列を [{ column.field: cell.value }, ...] の形式で返します。
レコードがピン固定されているかどうかを返します。
Index of the record in the filteredSortedData collection.
IgxGridComponent の変更検知をトリガーします。
markForCheck を呼び出すと、グリッドのパイプも明示的にトリガーされ、すべての更新が処理されます。
不要なときに使用したり、誤用したりすると、パフォーマンスが低下する可能性があります。
```typescript //注意事項 //ループ内から markForCheck を呼び出さないでください。 //プリミティブが変更されたときに markForCheck を呼び出さないでください。 grid.data.forEach(rec => { rec = newValue; grid.markForCheck(); });
//注意事項 //ネストされたプロパティを更新した後に markForCheck を呼び出してください。 grid.data.forEach(rec => { rec.nestedProp1.nestedProp2 = newValue; }); grid.markForCheck(); ```
指定されたターゲット列の前または後に列を配置します。
rowindex と visibleColumnIndex に基づいてグリッド内の位置に移動します。
高度なフィルタリング ダイアログを開きます。
列をフィールド名によってピン固定します。
Pin the row by its id.
グリッドの幅/高さのサイズを再計算します。
既存の検索を再適用します。
すべての列を選択します。
すべての行を選択します。
指定した列を選択します。
if true clears the current selection
指定した行を ID によって選択します。
if true clears the current selection
現在選択されている列を取得します。
単一の IgxColumnComponent をソートします。
指定した列の表示状態を切り替えます。
ID によって行を切り替えます。
The row id - primaryKey value or the data record instance.
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
Unpin the row by its id.
プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。
the new value which is to be set.
corresponds to rowID.
corresponds to column field.
IgxGridRowComponent を更新します。
correspond to rowID
Ignite UI for Angular Tree Grid - ヘルプ
Ignite UI Tree Grid は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、 ソート、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。 例: