アクティブなノードが変更されたときに発生します。
<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
グリッドが空のときに行 UI を追加するためのカスタム テンプレートを取得または設定します。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
高度フィルタリングが UI で実行された後に発生されます。
高度フィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
列を自動生成するかどうかを取得または設定します。
デフォルト値は False です。true に設定た場合、コードまたはマークアップで宣言されたすべての列がオーバーライドされます。
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
生成された列コレクションから除外されるプロパティ キーのリストを取得または設定します
コレクションは初期化中にのみ使用され、それを変更しても、グリッドが破棄されて再作成されない限り、 実行時に生成された列に変更は発生しません。実行時に 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>
IgxTreeGridComponent
Readonly cdr変更検出機能を提供します。 変更検出ツリーは、変更がチェックされるすべてのビューを収集します。 プロパティは変更できません (読み取り専用)。
セルがクリックされたときに発生します。
IgxGridCell を返します。
<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
セルが編集された後に生成されます。
編集を完了してセルの編集モードを終了するときにイベントが発生します。 このイベントはキャンセルできます。
<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
セルが編集され、編集が確定された後に発生します。
<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
セルが編集モードに入るときに生成されます。
このイベントはキャンセルできます。
<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
セルが編集モードを終了すると発行されます。
<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
IgxTreeGridComponent の子データ キーを設定します。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent
グリッドのコピー動作を制御します。
列が初期化されるときに発生します。
列オブジェクトを返します。
<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
列移動操作のときに発生されます。
ソースとターゲットの IgxColumnComponent オブジェクトを返します。このイベントはキャンセルできます。
<igx-grid (columnMoving)="moving($event)"></igx-grid>
列移動が終了したときに発生されます。
ソースとターゲットの IgxColumnComponent オブジェクトを返します。
<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>
列移動を開始したときに発生されます。
移動した IgxColumnComponent オブジェクトを返します。
<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>
IgxColumnComponent がピン固定される前に発生します。
列に挿入するインデックスは insertAtIndex プロパティによって変更できます。
public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
IgxColumnComponent がピン固定された後に発生します。
列に挿入するインデックスは insertAtIndex プロパティによって変更できます。
public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
列のサイズが変更された後に発行されます。
IgxColumnComponent オブジェクトの古い幅および新しい幅を返します。
<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
IgxColumnComponent が選択されたときに発生します。
<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
列の表示状態が変更された後に発行されます。
引数: { column: IgxColumnComponent, newValue: boolean }
<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
列の表示状態が変更される前に発行されます。
引数: { column: any, newValue: boolean }
<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
セルが右クリックされたときに発生されます。
IgxGridCell オブジェクトを返します。
<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
データ操作、再バインドなどのためにグリッドのデータ ビューが変更された後に発生します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
データ操作、再バインドなどのためにグリッドのデータ ビューが変更される前に発生します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
セルがダブルクリックされたときに発生されます。
IgxGridCell オブジェクトを返します。
<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
空の場合のカスタムテンプレートを取得または設定します。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
フィルタリング式が適用される前に発生されます。
IFilteringEventArgs オブジェクトを返します。filteringExpressions キーは、列のフィルタリング式を保持します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>
UI を介してフィルタリングが実行された後に発行されます。
フィルターされた列のフィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>
フィルタリングが UI で実行された後に発生されます。
フィルターされた列のフィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
IgxTreeGridComponent の外部キーを設定します。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>
IgxTreeGridComponent
行/セルの編集時に formGroup が作成されたときに発生します。
<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Readonly gridAPIグリッドに API メソッドを提供するグリッド サービス タイプを表します。
コピー操作が実行されたときに発生します。
[clipboardOptions]IgxGridBaseDirective#clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
このイベントは、グリッドでキーの組み合わせがサポートされている場合にのみ発生します。 ターゲット タイプ、ターゲット オブジェクト、および元のイベントを返します。このイベントはキャンセルできます。
<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
グリッドが水平/垂直にスクロールされるときに発生します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
行に子があるかどうかを示すキーを設定します。 このプロパティは、ロードオンデマンドのシナリオでのみ使用されます。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>
IgxTreeGridComponent
id 属性の値を設定します。提供されていない場合は、自動的に生成されます。
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
IgxTreeGridComponent
前回の検索情報を表します。
要求に応じて子行をロードするためのコールバックを設定します。
<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));
}
IgxTreeGridComponent
読み込み時のカスタムテンプレートを取得または設定します。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
列移動がグリッドで有効かどうかを制御します。
プライマリ キーを取得または設定します。
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
処理済み (フィルターとソート済み) のルート ITreeGridRecord の配列のマップを返します。
// primaryKey=2 の処理済みレコードを取得します。
const states = this.grid.processedRecords.get(2);
IgxTreeGridComponent
処理済み (フィルターとソート済み) のルート ITreeGridRecord の配列を返します。
// index=2 の処理済みルート レコールドを取得します。
const states = this.grid.processedRootRecords[2];
IgxTreeGridComponent
範囲選択を行ったときに発生します。
範囲選択がドラッグ選択またはキーボード選択による行います。
すべての ITreeGridRecord のマップを返します。
// primaryKey=2 のルート レベルを取得します
const states = this.grid.records.get(2);
IgxTreeGridComponent
ngAfterViewInit の後に発生します。この時点で、グリッドは DOM に存在します。
ルート レベルの ITreeGridRecord の配列を返します。
// index=2 のルート レベルを取得します。
const states = this.grid.rootRecords[2];
IgxTreeGridComponent
新しく追加された行がコミットされる直前に発行します。
このイベントはキャンセルできます。
IRowDataCancellableEventArgs オブジェクトを返します。
<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
行が追加されたときに発生します。
新しい IgxGridRowComponent オブジェクトのデータを返します。
<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。例:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
IgxColumnComponent
行を削除するときに発行します。
このイベントはキャンセルできます。
IgxGridRow.
<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
行を削除するときに発行します。
このイベントはキャンセルできます。
IRowDataCancellableEventArgs オブジェクトを返します。
<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
行が削除されたときに発生します。
IRowDataEventArgs オブジェクトを返します。
<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [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>
行が編集モードに入るときに生成されます。
[rowEditable]="true" のときに発生されます。 このイベントはキャンセルできます。
<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>
行編集がキャンセルされるときに発生されます。
[rowEditable]="true" & endEdit(false) が呼び出されるときに発生されます。
セル編集のときに Esc キーを押して、行編集オーバーレイに Cancel ボタン
を押すと発生されます。
<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>
行のピン固定状態が変更されたときに呼び出されます。
<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
行のピン固定状態が変更されたときに呼び出されます。
<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>
IgxGridRowComponent が選択されたときに発生します。
<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
グリッドの行要素に条件付きスタイル プロパティを設定します。 キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
IgxColumnComponent
行の展開状態が変更されているときに呼び出されます。
<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
セルが選択されたときに発生発生します。
IgxGridCell を返します。
<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッドの初期化後に列が自動で再生成されるかどうかを取得または設定します。
これにより、グリッドのリモート データへのバインドと列の自動生成を同ときに行うことができます。 新しいデータが割り当てらるときに列が再生成されないため、列が生成される後 このプロパティは無効にされることに注意してください。
this.grid.shouldGenerate = true;
行追加の snackbar 通知の表示時間を取得または設定します。
デフォルトでは 6000ms です。
ソート式が適用される前に発生されます。
ISortingEventArgs オブジェクトを返します。sortingExpressions キーは、ソート式を保持します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
ソートが完了した後に発行されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
ソートが UI で実行された前に発生されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
ユーザーがエクスポート処理が開始すると発生されます。
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}
Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
要求に応じて一意の列値をロードするためのコールバックを提供します。 このプロパティが提供された場合、生成される一意の値は Excel スタイル フィルタリングによって使用されます。
<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
Readonly validationグリッドの検証サービスを表します。この型には、レコードを検証するためのプロパティとメソッド (ロジック) が含まれます
グリッドの検証状態が変更されたときに発生します。
<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッドの編集時に使用される検証のトリガーを取得または設定します。
<igx-grid #grid validationTrigger='blur'></igx-grid>
高度なフィルタリング状態を取得または設定します。
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;
高度なフィルタリングが有効かどうかを示す値を取得または設定します。
<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
フィルタリングが有効かどうかを取得または設定します。
<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッド内のフィルタリングが有効かどうかを示します。値が true の場合、グリッドをフィルタリングできます。
グリッドの一括編集が有効かどうかを取得または設定します。
一括編集が有効な場合、基になるデータは直接変更されません。
代わりに、トランザクションとして保存され、commit メソッドで後でコミットできます。
<igx-grid [batchEditing]="true" [data]="someData">
</igx-grid>
セル選択モードを取得または設定します。
デフォルトでは、セル選択モードは multiple です。
セルの選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列選択モードを取得または設定します。
デフォルトでは、行選択モードは none です。
列の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列のデフォルトの幅を取得または設定します。
<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
IgxColumnComponent の配列を取得します。
const colums = this.grid.columns.
コンポーネントを構成するデータの配列を取得または設定します。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent
編集モード時のグリッドのデータ複製方法を取得または設定します。
<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
提供されたデータのクローンを作成するために使用されるストラテジです。この型には、任意のデータ型を受け取るメソッドが 1 つあります。
現在描画されている IgxGridRowComponent のリスト。
const dataList = this.grid.dataRowList;
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定/固定解除が適用された行データを返します。
const dataView = this.grid.dataView;
IgxGridHeaderGroupComponentの最小許容幅を返します。
ヘッダー グループ コンポーネントの幅を制限するために内部で使用されます。 以下の値は、ヘッダーセルのデフォルトの右/左パディング値に基づいています。
デフォルトの行の高さを取得します。
const rowHeigh = this.grid.defaultRowHeight;
コンポーネントのテーマを返します。デフォルトのテーマは
comfortable です。
利用可能なオプションは comfortable、cosy、または compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
行ドラッグ ゴーストに使用されるカスタム テンプレート (存在する場合) を取得します。
行ドラッグ ゴーストのカスタム テンプレートを設定します。
<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;
グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
レコードがない場合に表示されるメッセージを取得または設定します。
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
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>
IgxTreeGridComponent
キーと値のペア [行 Id、展開状態] のリストを取得または設定します。
デフォルト状態に異なる状態のみ含まれます。 双方向バインディングをサポートします。
<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>
フィルター モードを取得または設定します。
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
デフォルトで FilterMode.quickFilter に設定されます。
グリッドのフィルター モード。Excel スタイル フィルターのクイック フィルターにすることができます
グリッドのフィルタリング ストラテジを取得または設定します。
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
フィルターされたデータを含むオブジェクトの配列を返します。
let filteredData = this.grid.filteredData;
フィルターされてソート済みのデータを含む配列を返します。
const filteredSortedData = this.grid1.filteredSortedData;
フィルタリング状態を取得または設定します。
<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;
高さを取得または設定します。
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
非表示列の数を取得します。
const hiddenCol = this.grid.hiddenColumnsCount;
``
行セレクターが非表示されているかどうかを取得または設定します。
デフォルトでは、行セレクターが表示されます。
グリッドは読み込みインジケータを表すかどうかを取得または設定します。
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
ロケールを取得または設定します。
設定されていない場合、ブラウザーの言語設定を返します。
グリッドのロケールを表します: USD、EUR、GBP、CNY、JPY など。
ネイティブ要素を取得します。
const nativeEl = this.grid.nativeElement.
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
ピン固定の IgxColumnComponent の配列を取得します。
const pinnedColumns = this.grid.pinnedColumns.
ピン固定列の数を取得します。
ピン固定の IgxRowComponent の配列を取得します。
const pinnedRow = this.grid.pinnedRows;
初期のピン固定構成を取得または設定します。
列のピン固定を開始または終了に適用できます。 一度に両側にピン固定することはできません。
<igx-grid [pinning]="pinningConfig"></igx-grid>
グリッド内の列と行のピン固定の構成です。 型は IPinningConfig で、列 (start、end) と行 (top、bottom) の値を持つことができます。
リソース文字列を取得または設定します。
デフォルトで EN リソースを使用します。
行追加テキスト テンプレートを取得します。
行追加テキスト テンプレートを設定します。
<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;
行が移動可能かどうかを取得または設定します。
<igx-grid #grid [rowDraggable]="true"></igx-grid>
グリッド内の行をドラッグできるかどうかを示します。値が 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;
行が編集可能かどうかを取得または設定します。
デフォルトの設定は false です。
<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
グリッド内の行が編集可能かどうかを示します。値が 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;
行の高さを取得または設定します。
<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
グリッド内の各行の高さ。一定の高さを設定すると、スクロール時にすべての要素が表示されない問題を解決できます。
IgxGridRowComponentのリスト。
const rowList = this.grid.rowList;
ロードオンデマンドが有効になっているときに行ローディング インジケータのテンプレート。
<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>
IgxTreeGridComponent
オプション。 行読み込みインジケーターのテンプレートです。 これは 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;
行をクリックして選択/選択解除するかどうかを取得または設定します。
デフォルトで true に設定されます。
現在の選択状態を取得または設定します。
選択された行の ID (プライマリ キーまたは rowData) を表します。
<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
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]="localData" [sortStrategy]="sortStrategy"></igx-grid>
ソートの状態を取得または設定します。
双方向データ バインディングをサポートします。
<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 の高さを取得または設定します。
合計レコード数を返します。
ページングが有効な場合のみ動作します。
const totalRecords = this.grid.totalRecords;
ピン解除の IgxColumnComponent の配列を取得します。
const unpinnedColumns = this.grid.unpinnedColumns.
グリッド仮想化の状態を返します。
開始インデックスおよび描画されるレコード数を含みます。
const gridVirtState = this.grid1.virtualizationState;
表示される IgxColumnComponent の配列を返します。
const visibleColumns = this.grid.visibleColumns.
グリッドの幅を取得または設定します。
let gridWidth = this.grid.width;
所定のデータで新しい 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 の行に新しい子行を追加します。
IgxTreeGridComponent
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 にのみ適用されます。
フィールドによって特定の列の選択を解除します。
this.grid.deselectColumns(['ID','Name']);
単一の IgxColumnComponent をフィルターします。
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドに文字列が何回含まれるかを返します。
this.grid.findNext("financial");
検索する文字列。
オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルト値は false)。
オプションで、テキストは値全体に一致するかどうか (デフォルト値は false)。
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドに文字列が何回含まれるかを返します。
this.grid.findPrev("financial");
検索する文字列。
オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルト値は false)。
オプションで、テキストは値全体に一致するかどうか (デフォルト値は false)。
フィールド名によって IgxColumnComponent を返します。
const myCol = this.grid1.getColumnByName("ID");
表示密度の値に基づいて --component-size CSS 変数を設定します。
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();
grid.markForCheck();
指定されたターゲット列の前または後に列を配置します。
grid.moveColumn(column, target);
rowindex と visibleColumnIndex に基づいてグリッド内の位置に移動します。
{ targetType: GridKeydownTargetType, target: Object } を受け入れるコールバック関数を通してターゲット要素上で カスタム ロジックを実行することもできます。
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
高度なフィルタリング ダイアログを開きます。
列をフィールド名によってピン固定します。
操作が成功したかどうかを返します。
this.grid.pinColumn("ID");
すべての行を選択します。
フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。
this.grid.selectAllRows();
this.grid.selectAllRows(false);
指定した列を選択します。
this.grid.selectColumns(['ID','Name'], true);
True の場合、現在の選択をクリアします。
グリッドの特定の行と列の間のセル範囲を選択します。
現在選択されている列を取得します。
選択されている列の配列を返します。
const selectedColumns = this.grid.selectedColumns();
単一の IgxColumnComponent をソートします。
IgxGridComponent の IgxColumnComponent を提供したソート式の配列に基づいてソートします。
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
this.grid.pinColumn("ID");
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 は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、 ソート、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。
例: