アクティブなノードが変更されたときに発生します。
グリッドが空のときに行 UI を追加するためのカスタム テンプレートを取得または設定します。
高度フィルタリングが UI で実行された後に発生されます。
列を自動生成するかどうかを取得または設定します。
生成された列コレクションから除外されるプロパティ キーのリストを取得または設定します
コレクションは初期化中にのみ使用され、それを変更しても、グリッドが破棄されて再作成されない限り、 実行時に生成された列に変更は発生しません。実行時に UI に表示される列を変更するには、 hidden プロパティを使用してください。
Readonlycdr変更検出機能を提供します。 変更検出ツリーは、変更がチェックされるすべてのビューを収集します。 プロパティは変更できません (読み取り専用)。
セルがクリックされたときに発生します。
セルが編集された後に生成されます。
セルが編集され、編集が確定された後に発生します。
セルが編集モードに入るときに生成されます。
セルが編集モードを終了すると発行されます。
グリッドのコピー動作を制御します。
列が初期化されるときに発生します。
列移動操作のときに発生されます。
列移動が終了したときに発生されます。
列移動を開始したときに発生されます。
IgxColumnComponent がピン固定される前に発生します。
IgxColumnComponent がピン固定された後に発生します。
列のサイズが変更された後に発行されます。
IgxColumnComponent が選択されたときに発生します。
列の表示状態が変更された後に発行されます。
列の表示状態が変更される前に発行されます。
セルまたは行を右クリックすると発行されます。
データ操作、再バインドなどのためにグリッドのデータ ビューが変更された後に発生します。
データ操作、再バインドなどのためにグリッドのデータ ビューが変更される前に発生します。
新しいデータ チャンクが仮想化から読み込まれたときに発生されます。
セルがダブルクリックされたときに発生されます。
GroupBy ドロップ領域として描画されるテンプレートを取得または設定します。
行が拡張または縮小されたときに発生されます。
フィルタリング式が適用される前に発生されます。
UI を介してフィルタリングが実行された後に発行されます。
フィルタリングが UI で実行された後に発生されます。
行/セルの編集時に formGroup が作成されたときに発生します。
ReadonlygridAPIグリッドに API メソッドを提供するグリッド サービス タイプを表します。
コピー操作が実行されたときに発生します。
[clipboardOptions]IgxGridBaseDirective#clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
グリッドが水平/垂直にスクロールされるときに発生します。
列がグループ化/グループ解除されたときに発生します。
groupBy() または clearGrouping() API メソッドを呼び出して引数として渡すことにより複数列が一度にグループ化された場合に groupingDone イベントは一度のみ発生します。イベント引数は、ISortingExpression とグループ化/グループ解除操作と関連する IgxColumnComponent を含む expressions、groupedColumns、ungroupedColumns プロパティを提供します。groupedColumns と ungroupedColumns は新しく変更 (最近のグループ化/グループ解除操作によって影響) された列のみ表示し、現在グループ化/グループ解除されている すべての列ではありません。
グループが展開/縮小されたときに発行されます。
グループ化が実行されたときに発生されます。
作成したグループを展開または縮小として描画されるかどうかを取得または設定します。
id 属性の値を取得または設定します。
列移動がグリッドで有効かどうかを制御します。
範囲選択を行ったときに発生します。
ngAfterViewInit の後に発生します。この時点で、グリッドは DOM に存在します。
新しく追加された行がコミットされる直前に発行します。
行が追加されたときに発生します。
グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。例:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="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 スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
Readonlyvalidationグリッドの検証サービスを表します。このタイプには、レコードを検証するためのプロパティとメソッド (ロジック) が含まれます
グリッドの検証状態が変更されたときに発生します。
グリッドの編集時に使用される検証のトリガーを取得または設定します。
グリッド内のフィルタリングが有効かどうかを示します。値が true の場合、グリッドをフィルタリングできます。
セルの選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
編集モード時のグリッドのデータ複製方法を取得または設定します。
提供されたデータのクローンを作成するために使用されるストラテジです。このタイプには、任意のデータ タイプを受け取るメソッドが 1 つあります。
現在描画されている IgxGridRowComponent のリスト。
マスター/詳細テンプレートへの参照を返します。
let detailTemplate = this.grid.detailTemplate;
マスター/詳細テンプレートを設定します。
<ng-template #detailTemplate igxGridDetail let-dataItem>
<div>
<div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
<div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
</div>
</ng-template>
@ViewChild("'detailTemplate'", {read: TemplateRef })
public detailTemplate: TemplateRef<any>;
this.grid.detailTemplate = this.detailTemplate;
行ドラッグ ゴーストに使用されるカスタム テンプレート (存在する場合) を取得します。
行ドラッグ ゴーストのカスタム テンプレートを設定します。
<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;
フィルタリング状態を取得または設定します。
フィルター モードを取得または設定します。
グリッドのフィルタリング ストラテジを取得または設定します。
グループ化の行セレクター テンプレートを取得します。
グループ化の行セレクター テンプレートを設定します。
<ng-template #template igxGroupByRowSelector let-groupByRowContext>
{{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }}
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.groupByRowSelectorTemplate = this.template;
グループ行の展開状態のリストを設定します。
グループ行のテンプレート参照を取得または設定します。
オプション。 グループ化行のテンプレートです。 これは、埋め込みビューのインスタンス化に使用される埋め込みテンプレートを表す TemplateRef タイプです。
グリッドに表示される列があるかどうかを示します。
行縮小インジケーターのテンプレートを取得します。
行縮小インジケーターのテンプレートを設定します。
<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;
ヘッダー行セレクター テンプレートを取得します。
ヘッダー行セレクター テンプレートを設定します。
<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;
前回の検索情報を表します。
グリッドのロケールを表します: USD、EUR、GBP、CNY、JPY など。
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
ピン固定の IgxColumnComponent の配列を取得します。
ピン固定列の数を取得します。
初期のピン固定構成を取得または設定します。
グリッド内の列と行のピン固定の構成です。 これは 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 の場合、行をドラッグできます
グリッド内の行が編集可能かどうかを示します。値が 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;
行展開インジケーターのテンプレートを取得します。
行展開インジケーターのテンプレートを設定します。
<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;
グリッド内の各行の高さ。一定の高さを設定すると、スクロール時にすべての要素が表示されない問題を解決できます。
行の選択モードを表します: '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;
列が昇順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ヘッダーのソート インジケーターを描画するときに使用する、列が昇順でソートされている場合のカスタム テンプレートを設定します。
<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;
ソート オプション (single または multiple) を取得または設定します。
いずれかの mode プロパティを持つ ISortingOptions オブジェクトを受け入れます。
グリッドのソート ストラテジを取得または設定します。
集計計算モードを取得または設定します。
集計の計算モードを表します: 'rootLevelOnly'、'childLevelsOnly'、'rootAndChildLevels'
IgxSummaryRow の高さを取得または設定します。
グリッドのためのトランザクション サービスを取得します。
ピン固定解除の IgxColumnComponent の配列を取得します。
グリッド仮想化の状態を返します。
表示される IgxColumnComponent の配列を返します。
rowID で指定された行の下に UI を生成し、追加モードに入ります。
行追加 UI を生成する場合は RowID、データ ビューの最初のレコードとして生成する場合は null。
レコードを子として追加する必要があるかどうか。igxTreeGrid にのみ適用されます。
特定の列、列の配列またはすべての列のグループ化をクリアします。
グループ化が解除される列の名前または列名の配列です。
高度なフィルタリング ダイアログを閉じます。
変更を適用する必要があるかどうかを示します。
単一の IgxColumnComponent をフィルターします。
条件と一致する CellType オブジェクトを返します。
いずれかの rowID に一致します。
特定の基準に一致する、現在位置に従って次のセルを定義する ICellPosition を返します。
特定の基準に一致する、現在位置に従って
前のセルを定義する ICellPosition を返します。
グリッドで現在選択されている範囲を取得します。
IgxColumnComponent を提供された式によってグループ化、または既存の式を変更します。
ISortingExpression の配列が渡されると複数列を一度にグループ化できるようになります。
このメソッドが同じ引数で複数回呼びだされた場合、groupingDone イベントは 1 度のみ発生します。
this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
this.grid.groupBy([
{ fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
{ fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
{ fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
]);
レコードがピン固定されているかどうかを返します。
filteredSortedData コレクション内のレコードのインデックスです。
IgxGridComponent の変更検出をトリガーします。
markForCheck を呼び出すと、グリッドのパイプも明示的にトリガーされ、すべての更新が処理されます。
不要なときに使用したり、誤用したりすると、パフォーマンスが低下する可能性があります。
// 注意事項
// ループ内から markForCheck を呼び出さないでください。
// プリミティブが変更されたときに markForCheck を呼び出さないでください。
grid.data.forEach(rec => {
rec = newValue;
grid.markForCheck();
});
// 注意事項
// ネストされたプロパティを更新した後に markForCheck を呼び出します。
grid.data.forEach(rec => {
rec.nestedProp1.nestedProp2 = newValue;
});
grid.markForCheck();
指定されたターゲット列の前または後に列を配置します。
指定した列を選択します。
True の場合、現在の選択をクリアします。
現在選択されている列を取得します。
単一の IgxColumnComponent をソートします。
指定した列の表示状態を切り替えます。
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
グリッドは、表データを表示および操作する方法を提供します。
Igx Module
IgxGridModule
Igx Group
グリッド & リスト
Igx Keywords
grid, table
Igx Theme
igx-grid-theme
備考
Ignite UI Grid は簡単に表データを表示して操作するために使用されます。 データをバインドした後、フィルタリング、ソート、および編集操作を使用して変更できます。
例