アクティブなノードが変更されたときに発生します。
グリッドが空のときに行 UI を追加するためのカスタム テンプレートを取得または設定します。
高度フィルタリングが UI で実行された後に発生されます。
列を自動生成するかどうかを取得または設定します。
生成された列コレクションから除外されるプロパティ キーのリストを取得または設定します
コレクションは初期化中にのみ使用され、それを変更しても、グリッドが破棄されて再作成されない限り、 実行時に生成された列に変更は発生しません。実行時に UI に表示される列を変更するには、 hidden プロパティを使用してください。
<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]
親レコードが削除されたときに子レコードも削除するかどうかを設定します。 デフォルトでは true に設定されており、親とともにすべての子レコードが削除されます。
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
</igx-tree-grid>
Readonly
cdr変更検出機能を提供します。 変更検出ツリーは、変更がチェックされるすべてのビューを収集します。 プロパティは変更できません (読み取り専用)。
セルがクリックされたときに発生します。
セルが編集された後に生成されます。
セルが編集され、編集が確定された後に発生します。
セルが編集モードに入るときに生成されます。
セルが編集モードを終了すると発行されます。
IgxTreeGridComponent
の子データ キーを設定します。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
グリッドのコピー動作を制御します。
列が初期化されるときに発生します。
列移動操作のときに発生されます。
列移動が終了したときに発生されます。
列移動を開始したときに発生されます。
IgxColumnComponent
がピン固定される前に発生します。
IgxColumnComponent
がピン固定された後に発生します。
列のサイズが変更された後に発行されます。
IgxColumnComponent
が選択されたときに発生します。
列の表示状態が変更された後に発行されます。
列の表示状態が変更される前に発行されます。
セルまたは行を右クリックすると発行されます。
データ操作、再バインドなどのためにグリッドのデータ ビューが変更された後に発生します。
データ操作、再バインドなどのためにグリッドのデータ ビューが変更される前に発生します。
セルがダブルクリックされたときに発生されます。
空の場合のカスタムテンプレートを取得または設定します。
フィルタリング式が適用される前に発生されます。
UI を介してフィルタリングが実行された後に発行されます。
フィルタリングが UI で実行された後に発生されます。
IgxTreeGridComponent
の外部キーを設定します。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>
行/セルの編集時に formGroup が作成されたときに発生します。
Readonly
gridAPIグリッドに API メソッドを提供するグリッド サービス タイプを表します。
コピー操作が実行されたときに発生します。
[clipboardOptions
]IgxGridBaseDirective#clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
グリッドが水平/垂直にスクロールされるときに発生します。
行に子があるかどうかを示すキーを設定します。 このプロパティは、ロードオンデマンドのシナリオでのみ使用されます。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>
id
属性の値を設定します。
提供されていない場合は、自動的に生成されます。```html
<igx-tree-grid [id]="'igx-tree-grid-1'">
要求に応じて子行をロードするためのコールバックを設定します。
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren">
</igx-tree-grid>
public loadChildren = (parentID: any, done: (children: any[]) => void) => {
this.dataService.getData(parentID, children => done(children));
}
読み込み時のカスタムテンプレートを取得または設定します。
列移動がグリッドで有効かどうかを制御します。
プライマリ キーを取得または設定します。
処理済み (フィルターとソート済み) のルート 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];
新しく追加された行がコミットされる直前に発行します。
行が追加されたときに発生します。
グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。例:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
行を削除するときに発行します。
行を削除するときに発行します。
行が削除されたときに発生します。
行をドロップしたときに発行されます。
行をドラッグし始めたときに発生します。
行の編集モードを終了するときに発生されます。
[rowEditable]="true" & endEdit(true)
が呼び出されるときに発生されます。
編集モード中に行を変更した時、編集された行内の編集が無効なセルを選択した時、ページング操作時、列のサイズ変更時、ピン固定時、移動時、rowEditingOverlay 内で Done
ボタンを押したとき、またはセルの編集中に Enter
キーを押したときに発生します。
このイベントはキャンセルできます。
<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>
行の編集モードを終了し、編集が確定された後に発生します。
[rowEditable]="true" & endEdit(true)
が呼び出されるときに発生されます。
編集モード中に行を変更した時、編集された行内の編集が無効なセルを選択した時、ページング操作時、列のサイズ変更時、ピン固定時、移動時、rowEditingOverlay 内で Done
ボタンを押したとき、またはセルの編集中に Enter
キーを押したときに発生します。
<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>
行が編集モードに入るときに生成されます。
行編集がキャンセルされるときに発生されます。
行のピン固定状態が変更されたときに呼び出されます。
行のピン固定状態が変更されたときに呼び出されます。
IgxGridRowComponent
が選択されたときに発生します。
グリッドの行要素に条件付きスタイル プロパティを設定します。 キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
行の展開状態が変更されているときに呼び出されます。
セルが選択されたときに発生発生します。
行追加の snackbar 通知の表示時間を取得または設定します。
ソート式が適用される前に発生されます。
ソートが完了した後に発行されます。
ソートが UI で実行された前に発生されます。
ユーザーがエクスポート処理が開始すると発生されます。
Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
要求に応じて一意の列値をロードするためのコールバックを提供します。 このプロパティが提供された場合、生成される一意の値は Excel スタイル フィルタリングによって使用されます。
<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
Readonly
validationグリッドの検証サービスを表します。このタイプには、レコードを検証するためのプロパティとメソッド (ロジック) が含まれます
グリッドの検証状態が変更されたときに発生します。
グリッドの編集時に使用される検証のトリガーを取得または設定します。
高度なフィルタリング状態を取得または設定します。
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;
グリッドの一括編集が有効かどうかを取得または設定します。
一括編集が有効な場合、基になるデータは直接変更されません。
代わりに、トランザクションとして保存され、commit
メソッドで後でコミットできます。
セル選択モードを取得または設定します。
セルの選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列選択モードを取得または設定します。
列の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列のデフォルトの幅を取得または設定します。
IgxColumnComponent
の配列を取得します。
コンポーネントを構成するデータの配列を取得または設定します。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
編集モード時のグリッドのデータ複製方法を取得または設定します。
提供されたデータのクローンを作成するために使用されるストラテジです。このタイプには、任意のデータ タイプを受け取るメソッドが 1 つあります。
現在描画されている IgxGridRowComponent
のリスト。
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定/固定解除が適用された行データを返します。
IgxGridHeaderGroupComponent
の最小許容幅を返します。
デフォルトの行の高さを取得します。
行ドラッグ ゴーストに使用されるカスタム テンプレート (存在する場合) を取得します。
行ドラッグ ゴーストのカスタム テンプレートを設定します。
<ng-template #template igxRowDragGhost>
<igx-icon>menu</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;
カスタム テンプレートがある場合、行ドラッグのインジケーター アイコンを描画するために使用されます。
行ドラッグ インジケーター アイコンを描画するときに使用するカスタム テンプレートを設定します。
<ng-template #template igxDragIndicatorIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragIndicatorIconTemplate = this.template;
Excel スタイルのヘッダー アイコンを取得します。
Excel スタイルのヘッダー アイコンを設定します。
<ng-template #template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.excelStyleHeaderIconTemplate = this.template;
IgxTreeGridComponent
で展開されるレベルの数を設定します。
デフォルトで、Infinity
に設定されて、つまりすべてのレベルは展開されます。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
フィルター モードを取得または設定します。
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
デフォルトで FilterMode.quickFilter に設定されます。
グリッドのフィルター モード。Excel スタイル フィルターのクイック フィルターにすることができます
グリッドのフィルタリング ストラテジを取得または設定します。
フィルターされたデータを含むオブジェクトの配列を返します。
フィルターされてソート済みのデータを含む配列を返します。
フィルタリング状態を取得または設定します。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
双方向バインディングをサポートします。
IgxGridComponent
のフィルター ロジックを設定します。
デフォルト値は AND です。
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
グリッドに表示される列があるかどうかを示します。
ヘッダー行セレクター テンプレートを取得します。
ヘッダー行セレクター テンプレートを設定します。
<ng-template #template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headSelectorTemplate = this.template;
行縮小インジケーターのテンプレートを取得します。
行縮小インジケーターのテンプレートを設定します。
<ng-template igxHeaderCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerCollapsedIndicatorTemplate = this.template;
ヘッダー展開インジケーター テンプレートを取得します。
ヘッダー展開インジケーター テンプレートを設定します。
<ng-template igxHeaderExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerExpandedIndicatorTemplate = this.template;
高さを取得または設定します。
非表示列の数を取得します。
行セレクターが非表示されているかどうかを取得または設定します。
グリッドは読み込みインジケーターを表すかどうかを取得または設定します。
前回の検索情報を表します。
ロケールを取得または設定します。
グリッドのロケールを表します: USD
、EUR
、GBP
、CNY
、JPY
など。
ネイティブ要素を取得します。
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
ピン固定の IgxColumnComponent
の配列を取得します。
ピン固定列の数を取得します。
ピン固定の IgxRowComponent
の配列を取得します。
初期のピン固定構成を取得または設定します。
グリッド内の列と行のピン固定の構成です。 これは IPinningConfig タイプで、列 (start、end) と行 (top、bottom) の値を持つことができます。
リソース文字列を取得または設定します。
行追加テキスト テンプレートを取得します。
行追加テキスト テンプレートを設定します。
<ng-template #template igxRowAddText>
Adding Row
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowAddTextTemplate = this.template;
行縮小インジケーターのテンプレートを取得します。
行縮小インジケーターのテンプレートを設定します。
<ng-template igxRowCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowCollapsedIndicatorTemplate = this.template;
行が移動可能かどうかを取得または設定します。
グリッド内の行をドラッグできるかどうかを示します。値が true の場合、行をドラッグできます
行編集アクション テンプレートを取得します。
行編集アクション テンプレートを設定します。
<ng-template #template igxRowEditActions let-endRowEdit>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditActionsTemplate = this.template;
行編集テキスト テンプレートを取得します。
行編集テキスト テンプレートを設定します。
<ng-template #template igxRowEditText let-rowChangesCount>
Changes: {{rowChangesCount}}
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditTextTemplate = this.template;
行が編集可能かどうかを取得または設定します。
グリッド内の行が編集可能かどうかを示します。値が true の場合、行を編集できます
行展開インジケーターのテンプレートを取得します。
行展開インジケーターのテンプレートを設定します。
<ng-template igxRowExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowExpandedIndicatorTemplate = this.template;
行の高さを取得または設定します。
グリッド内の各行の高さ。一定の高さを設定すると、スクロール時にすべての要素が表示されない問題を解決できます。
IgxGridRowComponent
のリスト。
ロードオンデマンドが有効になっているときに行ローディング インジケーターのテンプレート。
<ng-template #rowLoadingTemplate>
<igx-icon>loop</igx-icon>
</ng-template>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[rowLoadingIndicatorTemplate]="rowLoadingTemplate">
</igx-tree-grid>
オプション。 行読み込みインジケーターのテンプレートです。 これは TemplateRef タイプで、埋め込みビューのインスタンス化に使用される埋め込みテンプレートを表します。
行選択モードを取得または設定します。
デフォルトでは、行選択モードは 'none' です。 注: IgxGrid および IgxHierarchicalGrid では、'multipleCascade' は 'multiple' のように動作します。
行の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
行セレクターのテンプレートを取得します。
行セレクターのカスタム テンプレートを設定します。
<ng-template #template igxRowSelector let-rowContext>
<igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowSelectorTemplate = this.template;
行をクリックして選択/選択解除するかどうかを取得または設定します。
グリッドの初期化後に列が自動で再生成されるかどうかを取得または設定します。
これにより、グリッドをリモート データにバインドし、同時に列を自動生成できるようになります。 列を生成した後は、新しいデータが割り当てられるたびに列が再作成されるのを避けるために、このプロパティは無効になることに注意してください。
this.grid.shouldGenerate = true;
バージョン 18.2.0。列の再作成は、代わりに autoGenerate
に依存するようになりました。
groupBy / 親行が縮小されたときに集計行を表示するかどうかを制御します。
<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
デフォルトでは、showSummaryOnCollapse は 'false' に設定されています。これは、 グループ化/親行が縮小されたときに、集計行が表示されないことを意味します。
列が昇順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ヘッダーのソート インジケーターを描画するときに使用する、列が昇順でソートされている場合のカスタム テンプレートを設定します。
<ng-template #template igxSortAscendingHeaderIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortAscendingHeaderIconTemplate = this.template;
列が降順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ヘッダーのソート インジケーターを描画するときに使用する、列が昇順でソートされている場合のカスタム テンプレートを設定します。
<ng-template #template igxSortDescendingHeaderIcon>
<igx-icon>expand_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortDescendingHeaderIconTemplate = this.template;
ヘッダー ソート インジケーターを描画するときに使用する、列がソートされていない場合のカスタムテンプレート (存在する場合) を取得します。
ヘッダーのソート インジケーターを描画するときに使用する、列がソートされていない場合のカスタム テンプレートを設定します。
<ng-template #template igxSortHeaderIcon>
<igx-icon>unfold_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortHeaderIconTemplate = this.template;
グリッドのソート ストラテジを取得または設定します。
ソートの状態を取得または設定します。
双方向データ バインディングをサポートします。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
ソート オプション (単一または複数) を取得または設定します。
いずれかの mode
プロパティを持つ ISortingOptions
オブジェクトを受け入れます。
const _sortingOptions: ISortingOptions = {
mode: 'single'
}
```html
<igx-grid [sortingOptions]="sortingOptions"><igx-grid>
集計計算モードを取得または設定します。
<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
デフォルトで rootAndChildLevels で、集計はルート レベルと各子レベルのために計算されます。
集計の計算モードを表します: 'rootLevelOnly'、'childLevelsOnly'、'rootAndChildLevels'
集計位置を取得または設定します。
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
デフォルトで bottom です。
集計の位置を表します: 'top'、'bottom'
IgxSummaryRow の高さを取得または設定します。
合計レコード数を返します。
ピン解除の IgxColumnComponent
の配列を取得します。
グリッド仮想化の状態を返します。
表示される IgxColumnComponent
の配列を返します。
グリッドの幅を取得または設定します。
所定のデータで新しい IgxTreeGridRowComponent
を作成します。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 を生成し、追加モードに入ります。
行追加 UI を生成する場合は RowID、データ ビューの最初のレコードとして生成する場合は null。
this.grid.beginAddRowById('ALFKI');
this.grid.beginAddRowById('ALFKI', true);
this.grid.beginAddRowById(null);
行追加 UI を生成する場合は RowID、データ ビューの最初のレコードとして生成する場合は null。
レコードを子として追加する必要があるかどうか。igxTreeGrid にのみ適用されます。
インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。
インデックスに使用できる値は、0 から現在の行数 (this.grid.dataView.length) までの整数です。
this.grid.beginAddRowByIndex(10);
this.grid.beginAddRowByIndex(10, true);
this.grid.beginAddRowByIndex(null);
UI を生成するインデックスです。0 から 現在の行数 (this.grid.dataView.length) までの整数を設定できます。
レコードを子として追加する必要があるかどうか。igxTreeGrid にのみ適用されます。
フィールドによって特定の列の選択を解除します。
単一の IgxColumnComponent
をフィルターします。
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
フィールド名によって IgxColumnComponent
を返します。
width
に設定される IgxGridHeaderGroupComponent
を取得します。
特定の基準に一致する、現在位置に従って次のセルを定義する ICellPosition
を返します。
getPreviousCell
メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。
const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
特定の基準に一致する、現在位置に従って
前のセルを定義する ICellPosition
を返します。
getPreviousCell
メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。
const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
グリッドで現在選択されている範囲を取得します。
IgxGridComponent
の変更検出をトリガーします。
markForCheck を呼び出すと、グリッドのパイプも明示的にトリガーされ、すべての更新が処理されます。
不要なときに使用したり、誤用したりすると、パフォーマンスが低下する可能性があります。
// 注意事項
// ループ内から markForCheck を呼び出さないでください。
// プリミティブが変更されたときに markForCheck を呼び出さないでください。
grid.data.forEach(rec => {
rec = newValue;
grid.markForCheck();
});
// 注意事項
// ネストされたプロパティを更新した後に markForCheck を呼び出します。
grid.data.forEach(rec => {
rec.nestedProp1.nestedProp2 = newValue;
});
grid.markForCheck();
指定されたターゲット列の前または後に列を配置します。
rowindex
と visibleColumnIndex
に基づいてグリッド内の位置に移動します。
{ targetType: GridKeydownTargetType, target: Object } を受け入れるコールバック関数を通してターゲット要素上で カスタム ロジックを実行することもできます。
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
高度なフィルタリング ダイアログを開きます。
列をフィールド名によってピン固定します。
すべての行を選択します。
フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。
this.grid.selectAllRows();
this.grid.selectAllRows(false);
指定した列を選択します。
True の場合、現在の選択をクリアします。
グリッドの特定の行と列の間のセル範囲を選択します。
現在選択されている列を取得します。
単一の IgxColumnComponent
をソートします。
IgxGridComponent
の IgxColumnComponent
を提供したソート式の配列に基づいてソートします。
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
Updates the IgxGridRowComponent
行が rowSelector パラメーター および渡された値を持つデータ ソース レコードによって指定されます。 このメソッドは、プライマリ キーがグリッドで指定されている場合のみ要求した更新を適用します。
grid.updateRow({
ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
}, 1);
rowID に対応します。
Ignite UI for Angular Tree Grid - ヘルプ
Ignite UI Tree Grid は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、 ソート、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。
例: