アクティブなノードが変更されたときに発生します。
<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>
高度フィルタリングが実行された後に発生されます。
高度フィルタリング式ツリーを返します。
<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 }]
親が削除されると子レコードも削除されるかどうかを表す @Input プロパティ。 デフォルトで 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
の子データ キーを設定する @Input プロパティ。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent
グリッドのコピー動作を制御します。
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
.
列が初期化されるときに発生します。
列オブジェクトを返します。
<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>
フィルタリングが実行された後に発生されます。
フィルターされた列のフィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
IgxTreeGridComponent
の外部キーを設定する @Input プロパティ。
<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コピー操作が実行されたときに発生します。
[clipboardOptions
]IgxGridBaseDirective#clipboardOptions でコピー動作が有効になっている場合にのみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
このイベントは、グリッドでキーの組み合わせがサポートされている場合にのみ発生します。 ターゲット タイプ、ターゲット オブジェクト、および元のイベントを返します。このイベントはキャンセルできます。
<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
グリッドが水平/垂直にスクロールされるときに発生します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
行に子があるかどうかを示すキーを設定する @Input プロパティ。 このプロパティは、ロードオンデマンドの場合のみ使用されます。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>
IgxTreeGridComponent
id
属性の値を設定する @Input プロパティ。提供されていない場合は、自動的に生成されます。
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
IgxTreeGridComponent
前回の検索情報を表します。
An
property that provides a callback for loading child rows on demand.
<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
新しく追加された行がコミットされる直前に発行します。
このイベントはキャンセルできます。
IGridEditEventArgs
オブジェクトを返します。
<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
行を削除するときに発行します。
このイベントはキャンセルできます。
IGridEditEventArgs
オブジェクトを返します。
<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>
ソートが UI で実行されたときに発生されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
ソートが実行された前に発生されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
ユーザーがエクスポート処理が開始すると発生されます。
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}
Gets/Sets a unique values strategy used by the Excel Style Filtering
Provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering.
<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>
グリッドの一括編集が有効かどうかを取得または設定します。
一括編集が有効な場合、基になるデータは直接変更されません。
代わりに、トランザクションとして保存され、commit
メソッドで後でコミットできます。
<igx-grid [batchEditing]="true" [data]="someData">
</igx-grid>
セル選択モードを取得または設定します。
デフォルトでは、セル選択モードは multiple です。
行選択モードを取得または設定します。
デフォルトでは、行選択モードは none です。
列のデフォルトの幅を取得または設定します。
<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
IgxColumnComponent
の配列を取得します。
const colums = this.grid.columns.
IgxTreeGridComponent
にデータの配列をインポートする @Input プロパティ。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
IgxTreeGridComponent
編集モードのときにグリッドのデータ クローン ストラテジを取得または設定します。
<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
現在描画されている 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
で展開されるレベルの数を設定する @Input プロパティ。
デフォルトで、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 に設定されます。
グリッドのフィルタリング ストラテジを取得または設定します。
<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>
ロケールを取得または設定します。
設定されていない場合、ブラウザーの言語設定を返します。
ネイティブ要素を取得します。
const nativeEl = this.grid.nativeElement.
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。
ピン固定の IgxColumnComponent
の配列を取得します。
const pinnedColumns = this.grid.pinnedColumns.
ピン固定列の数を取得します。
ピン固定の IgxRowComponent
の配列を取得します。
const pinnedRow = this.grid.pinnedRows;
初期のピン固定構成を取得または設定します。
列のピン固定を開始または終了に適用できます。 一度に両側にピン固定することはできません。
<igx-grid [pinning]="pinningConfig"></igx-grid>
リソース文字列を取得/設定します。
デフォルトで 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>
行編集の動作テンプレートを取得します。
行編集の動作テンプレートを設定します。
<ng-template #template igxRowEditActions let-endRowEdit>
<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<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>
行展開インジケーターのテンプレートを取得します。
行展開インジケーターのテンプレートを設定します。
<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;
ロードオンデマンドが有効になっているときに行ローディング インジケータのテンプレートを提供する @Input プロパティ。```html
<ng-template #rowLoadingTemplate>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren" [rowLoadingIndicatorTemplate]="rowLoadingTemplate"> ```
IgxTreeGridComponent
行選択モードを取得または設定します。
デフォルトでは、行選択モードは 'none' です。 注: IgxGrid および IgxHierarchicalGrid では、'multipleCascade' は 'multiple' のように動作します。
行セレクター テンプレートを取得します。
行セレクターのカスタム テンプレートを設定します。
<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>
グループ化 / 親行が縮小されたときに集計行を表示するかどうかを制御します。
<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 で、集計はルート レベルと各子レベルのために計算されます。
集計位置を取得または設定します。
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
デフォルトの設定は 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
所定のデータで新しい 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 の行に新しい子行を追加します。
所定のデータで新しい 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);
rowID で指定された行の下に UI を生成し、追加モードに入ります。
rowID で指定された行の下に UI を生成し、追加モードに入ります。
インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。
UI を生成するインデックス。0 から 現在の行数 (this.grid.dataView.length) までの整数を設定できます。
this.grid.beginAddRowByIndex(10);
this.grid.beginAddRowByIndex(10, true);
this.grid.beginAddRowByIndex(null);
インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。
インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。
すべての行を選択解除します。
フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。
this.grid.deselectAllRows();
すべての行を選択解除します。
フィールドによって特定の列の選択を解除します。
this.grid.deselectColumns(['ID','Name']);
フィールドによって特定の列の選択を解除します。
指定した列で集計を有効にし、customSummary を適用します。
customSummary を設定しない場合、列のデータ型のデフォルト集計が適用されます。
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);
配列の列で集計を有効にします。
grid.enableSummaries('ProductName');
指定した列で集計を有効にし、customSummary を適用します。
現在の行の行トランザクションを完成し、グリッド編集がキャンセルされたかどうかを返します。
commit === true
の場合、未解決状態からデータ (またはトランザクション サービス) へ渡します。
<button igxButton (click)="grid.endEdit(true)">Commit Row</button>
現在の行の行トランザクションを完成し、グリッド編集がキャンセルされたかどうかを返します。
単一の IgxColumnComponent
をフィルターします。
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
単一の IgxColumnComponent
をフィルターします。
単一の IgxColumnComponent
をフィルターします。
単一の IgxColumnComponent
をフィルターします。
単一の IgxColumnComponent
をフィルターします。
同じ条件で IgxGridComponent
のすべての IgxColumnComponent
をフィルターします。
grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
同じ条件で IgxGridComponent
のすべての IgxColumnComponent
をフィルターします。
同じ条件で IgxGridComponent
のすべての IgxColumnComponent
をフィルターします。
同じ条件で IgxGridComponent
のすべての IgxColumnComponent
をフィルターします。
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドに文字列が何回含まれるかを返します。
this.grid.findNext("financial");
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドに文字列が何回含まれるかを返します。
this.grid.findPrev("financial");
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。
フィールド名によって IgxColumnComponent
を返します。
const myCol = this.grid1.getColumnByName("ID");
フィールド名によって IgxColumnComponent
を返します。
IgxGridHeaderGroupComponent
に設定される width
を取得します。
特定の基準に一致する、現在位置に従って次のセルを定義する ICellPosition
を返します。
getPreviousCell
メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。m
const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
特定の基準に一致する、現在位置に従って
前のセルを定義する ICellPosition
を返します。
getPreviousCell
メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。m
const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
現在の列選択の配列を [{ column.field: cell.value }, ...]
の形式で返します。
formatters
が有効な場合、セル値はそれぞれの列フォーマッタ (もしあれば)
によってフォーマットされます。headers
が有効な場合、列フィールドの代わりに列ヘッダーがある場合はそれを使います。
現在のセル選択の配列を [{ column.field: cell.value }, ...]
の形式で返します。
formatters
が有効な場合、セル値はそれぞれの列フォーマッタ (もしあれば) によってフォーマットされます。
headers
が有効な場合、列フィールドの代わりに列ヘッダーがある場合はそれを使います。
グリッドで現在選択されている範囲を取得します。
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);
指定した列を選択します。
指定した列を選択します。
グリッドの特定の行と列の間のセル範囲を選択します。
現在選択されている列を取得します。
選択されている列の配列を返します。
const selectedColumns = this.grid.selectedColumns();
単一の IgxColumnComponent
をソートします。
IgxGridComponent
の IgxColumnComponent
を提供したソート式の配列に基づいてソートします。
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
指定した列の表示状態を切り替えます。
this.grid1.toggleColumnVisibility({
column: this.grid1.columns[0],
newValue: true
});
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
this.grid.pinColumn("ID");
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
プライマリキーによって IgxGridRowComponent
および対応するデータ レコードを更新します。
primaryKey
プロパティの設定が必要です。
this.gridWithPK.updateCell('Updated', 1, 'ProductName');
プライマリキーによって IgxGridRowComponent
および対応するデータ レコードを更新します。
プライマリキーによって IgxGridRowComponent
および対応するデータ レコードを更新します。
プライマリキーによって IgxGridRowComponent
および対応するデータ レコードを更新します。
IgxGridRowComponent
を更新します。
行が rowSelector パラメーター および渡された値を持つデータ ソース レコードによって指定されます。 このメソッドは、プライマリ キーがグリッドで指定されている場合のみ要求した更新を適用します。
grid.updateRow({
ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
}, 1);
IgxGridRowComponent
を更新します。
Ignite UI for Angular Tree Grid - ヘルプ
Ignite UI Tree Grid は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、 ソート、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。
例: