アクティブなノードが変更されたときに発生します。

Example

<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>

グリッドが空のときに行 UI を追加するためのカスタム テンプレートを取得または設定します。

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

高度フィルタリングが実行された後に発生されます。

Remarks

高度フィルタリング式ツリーを返します。

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
          (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>

列を自動生成するかどうかを取得または設定します。

Remarks

デフォルト値は False です。true に設定た場合、コードまたはマークアップで宣言されたすべての列がオーバーライドされます。

Example

<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>

生成された列コレクションから除外されるプロパティ キーのリストを取得または設定します。

Remarks

コレクションは初期化中にのみ使用され、それを変更しても、グリッドが破棄されて再作成されない限り、 実行時に生成された列に変更は発生しません。実行時に UI に表示される列を変更するには、 hidden プロパティを使用してください。

Example

<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>

const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]

セルがクリックされたときに発生します。

Remarks

IgxGridCell を返します。

Example

<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

セルが編集された後に生成されます。

Remarks

編集を完了してセルの編集モードを終了するときにイベントが発生します。 このイベントはキャンセルできます。

Example

<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

セルが編集され、編集が確定された後に発生します。

Example

<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

セルが編集モードに入るときに生成されます。

Remarks

このイベントはキャンセルできます。

Example

<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

セルが編集モードを終了すると発生します。

Example

<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

グリッドのコピー動作を制御します。

列が初期化されるときに発生します。

Remarks

列オブジェクトを返します。

Example

<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>

列移動操作のときに発生されます。

Remarks

ソースとターゲットの IgxColumnComponent オブジェクトを返します。このイベントはキャンセルできます。

Example

<igx-grid (columnMoving)="moving($event)"></igx-grid>

列移動が終了したときに発生されます。

Remarks

ソースとターゲットの IgxColumnComponent オブジェクトを返します。

Example

<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>

列移動を開始したときに発生されます。

Remarks

移動した IgxColumnComponent オブジェクトを返します。

Example

<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>

IgxColumnComponent がピン固定されたときに発生します。

Remarks

列に挿入するインデックスは insertAtIndex プロパティによって変更できます。

Example

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

IgxColumnComponent がピン固定された後に発生します。

Remarks

列に挿入するインデックスは insertAtIndex プロパティによって変更できます。

Example

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

列がサイズ変更されたときに発生されます。

Remarks

IgxColumnComponent オブジェクトの古い幅および新しい幅を返します。

Example

<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>

IgxColumnComponent が選択されたときに発生します。

Example

<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

列の表示状態を変更するときに発生されます。

Remarks

引数: { column: IgxColumnComponent, newValue: boolean }

Example

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

列の表示状態を変更する前に発生されます。

Remarks

引数: { column: any, newValue: boolean }

Example

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>

セルが右クリックされたときに発生されます。

Remarks

IgxGridCell オブジェクトを返します。

<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>

データ操作や再バインドなどにより、グリッドのデータ ビューが変更される後に発生されます。

Example

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>

データ操作や再バインドなどにより、グリッドのデータ ビューが変更される前に発生されます。

Example

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>

セルがダブルクリックされたときに発生されます。

Remarks

IgxGridCell オブジェクトを返します。

Example

<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>

空の場合のカスタム テンプレートを取得または設定します。

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

フィルタリング式が適用される前に発生されます。

Remarks

IFilteringEventArgs オブジェクトを返します。filteringExpressions キーは、列のフィルタリング式を保持します。

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>

フィルタリングが UI で実行されたときに発生されます。

Remarks

フィルターされた列のフィルタリング式ツリーを返します。

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>

フィルタリングが実行された後に発生されます。

Remarks

フィルターされた列のフィルタリング式ツリーを返します。

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>

行/セルの編集で formGroup が作成されたときに発生します。

Example

<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

コピー操作が実行されたときに発生します。

Remarks

[clipboardOptions]IgxGridBaseDirective#clipboardOptions でコピー動作が有効になっている場合にのみ発生します。

グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。

Remarks

このイベントは、グリッドでキーの組み合わせがサポートされている場合にのみ発生します。 ターゲット タイプ、ターゲット オブジェクト、および元のイベントを返します。このイベントはキャンセルできます。

Example

 <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>

グリッドが水平/垂直にスクロールされるときに発生します。

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (gridScroll)="onScroll($event)"></igx-grid>

読み込み時のカスタム テンプレートを取得または設定します。

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

列移動がグリッドで有効かどうかを制御します。

プライマリ キーを取得または設定します。

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

範囲選択を行ったときに発生します。

Remarks

範囲選択がドラッグ選択またはキーボード選択による行います。

ngAfterViewInit の後に発生します。この時点で、グリッドは DOM に存在します。

新しく追加された行がコミットされる直前に発行します。

Remarks

このイベントはキャンセルできます。 IGridEditEventArgs オブジェクトを返します。

Example

<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

行が追加されたときに発生されます。

Remarks

新しい IgxGridRowComponent オブジェクトのデータを返します。

Example

<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>

Memberof

IgxColumnComponent

行を削除するときに発行します。

Remarks

このイベントはキャンセルできます。 IGridEditEventArgs オブジェクトを返します。

Example

<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

行が削除されたときに発生されます。

Remarks

IRowDataEventArgs オブジェクトを返します。

Example

<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

行をドロップしたときに発生します。

Remarks

ドロップされた行を返します。

行をドラッグし始めたときに発生します。

Remarks

ドラッグされた行を返します。

行の編集モードを終了するときに発生されます。

Remarks

[rowEditable]="true" & endEdit(true) が呼び出されるときに発生されます。 編集モード中に行を変更した時、編集された行内の編集が無効なセルを選択した時、ページング操作時、列のサイズ変更時、ピン固定時、移動時、rowEditingOverlay 内で Done ボタンを押したとき、またはセルの編集中に Enter キーを押したときに発生します。 このイベントはキャンセルできます。

Example

<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

行の編集モードを終了し、編集が確定された後に発生します。

Remarks

[rowEditable]="true" & endEdit(true) が呼び出されるときに発生されます。 編集モード中に行を変更した時、編集された行内の編集が無効なセルを選択した時、ページング操作時、列のサイズ変更時、ピン固定時、移動時、rowEditingOverlay 内で Done ボタンを押したとき、またはセルの編集中に Enter キーを押したときに発生します。

Example

<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

行が編集モードに入るときに生成されます。

Remarks

[rowEditable]="true" のときに発生されます。 このイベントはキャンセルできます。

Example

<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

行編集がキャンセルされるときに発生されます。

Remarks

[rowEditable]="true" & endEdit(false) が呼び出されるときに発生されます。 セル編集のときに Esc キーを押して、行編集オーバーレイに Cancel ボタン を押すと発生されます。

Example

<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

行のピン固定状態が変更されたときに呼び出されます。

Example

<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>

行のピン固定状態が変更されたときに呼び出されます。

Example

<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>

IgxGridRowComponent が選択されたときに発生します。

Example

<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>

Memberof

IgxColumnComponent

行の展開状態が変更されているときに呼び出されます。

Example

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>

セルが選択されたときに発生します。

Remarks

IgxGridCell を返します。

Example

<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

グリッドの初期化後に列が自動で再生成されるかどうかを取得または設定します。

Remarks

これにより、グリッドのリモート データへのバインドと列の自動生成を同ときに行うことができます。 新しいデータが割り当てらるときに列が再生成されないため、列が生成される後 このプロパティは無効にされることに注意してください。

Example

 this.grid.shouldGenerate = true;

行追加の Snackbar 通知の表示時間を取得/設定します。

Remarks

デフォルトでは 6000ms です。

ソート式が適用される前に発生されます。

Remarks

ISortingEventArgs オブジェクトを返します。sortingExpressions キーは、ソート式を保持します。

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>

ソートが UI で実行されたときに発生されます。

Remarks

ソート式を返します。

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>

ソートが実行された前に発生されます。

Remarks

ソート式を返します。

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>

ユーザーがエクスポート処理が開始すると発生されます。

Example

toolbarExporting(event: IGridToolbarExportEventArgs){
    const toolbarExporting = event;
}

グリッドの検証状態が変更されたときに発生します。

Example

<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

リッドの編集時に使用される検証のトリガーを取得または設定します。

Example

<igx-grid #grid validationTrigger='blur'></igx-grid>