IgxGridComponent 列を自動生成する @Input プロパティ。 デフォルト値は False です。

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

定義済みの列非表示 UI に表示されるタイトルを設定する @Input プロパティ。

<igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>

列ピン固定 UI に表示されるタイトルを設定する @Input プロパティ。

<igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>

IgxGridComponent にデータの配列をインポートする @Input プロパティ。

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

フィルターされた IgxGridComponent が空の場合に表示されるテンプレートのテンプレート参照。

const emptyTempalte = this.grid.emptyGridTemplate;

IgxGridComponent が空の場合に表示されるテンプレートのテンプレート参照。

const emptyTempalte = this.grid.emptyGridTemplate;

IgxGridComponent が空の場合にカスタム テンプレートを設定する @Input プロパティ。

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

グリッドですべての偶数な IgxGridRowComponent にスタイル クラスを追加する @Input プロパティ。

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>

グリッドですべての奇数な IgxGridRowComponent にスタイル クラスを追加する @Input プロパティ。

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>

IgxGridCellComponent がクリックされたときに発生します。IgxGridCellComponent を返します。

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

public onCellClick(e){
    alert("The cell has been clicked!");
}

IgxGridCellComponent は編集モードに入るときに、イベントを発生する @Output プロパティ。IgxGridCellComponent 編集で、イベント引数の IgxGridCellComponent および IgxGridRowComponent オブジェクトが、編集中の対応する IgxGridCellComponent および IgxGridCellComponent に属する IgxGridRowComponent のために定義されます。

editDone(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}

<igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>

グリッドで IgxGridCellComponent 編集を実行した後に値が送信されてない場合にイベントを発生する @Output プロパティ。IgxGridCellComponent 編集で、イベント引数の IgxGridCellComponent および IgxGridRowComponent オブジェクトが、編集中の対応する IgxGridCellComponent および IgxGridCellComponent に属する IgxGridRowComponent のために定義されます。

editCancel(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}

<igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>

グリッドで IgxGridCellComponent の編集が実行されたときにイベントを発生する @Output プロパティ。IgxGridCellComponent 編集で、イベント引数の IgxGridCellComponent および IgxGridRowComponent オブジェクトが、編集中の対応する IgxGridCellComponent および IgxGridCellComponent に属する IgxGridRowComponent のために定義されます。

editStart(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}

<igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>

グリッド列が初期化されるときに発生します。列オブジェクトを返します。

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

initColumns(event: IgxColumnComponent) {
const column: IgxColumnComponent = event;
      column.filterable = true;
      column.sortable = true;
      column.editable = true;
}

IgxColumnComponent 移動操作の間に発生されます。 ソースとターゲットの IgxColumnComponent オブジェクトを返します。このイベントはキャンセルできます。

moving(event: IColumnMovingEventArgs){
    const moving = event;
}

<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>

IgxColumnComponent の移動を終了したときに発生されます。 ソースとターゲットの IgxColumnComponent オブジェクトを返します。このイベントはキャンセルできます。

movingEnds(event: IColumnMovingEndEventArgs){
    const movingEnds = event;
}

<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>

IgxColumnComponent の移動を開始したときに発生されます。移動した IgxColumnComponent オブジェクトを返します。

movingStart(event: IColumnMovingStartEventArgs){
    const movingStarts = event;
}

<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>

IgxColumnComponent がピン固定されたときに発生します。 列に挿入するインデックスは insertAtIndex プロパティによって変更できます。

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

IgxColumnComponent がサイズ変更されたときに発生します。 IgxColumnComponent オブジェクトの古い幅および新しい幅を返します。

resizing(event: IColumnResizeEventArgs){
    const grouping = event;
}

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

IgxColumnComponent の表示状態を変更するときに発生されます。引数: { column: any, newValue: boolean }

visibilityChanged(event: IColumnVisibilityChangedEventArgs){
   const visiblity = event;
}

<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

IgxGridCellComponent が右クリックされたときに発生されます。IgxGridCellComponent オブジェクトを返します。

contextMenu(event: IGridCellEventArgs){
    const resizing = event;
    console.log(resizing);
}

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

新しいデータの塊が可視化から読み込まれたときに発生されます。

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

IgxGridCellComponent がダブルクリックされたときに発生されます。IgxGridCellComponent オブジェクトを返します。

dblClick(event: IGridCellEventArgs){
    const dblClick = event;
    console.log(dblClick);
}

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

フィルタリングが UI で実行されたときに発生されます。 フィルターされた列のフィルタリング式ツリーを返します。

filteringDone(event: IFilteringExpressionsTree){
    const filteringTree = event;
}

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

ページングが実行されたときに発生されます。前のページおよび次のページを含むオブジェクトを返します。

pagingDone(event: IPageEventArgs){
    const paging = event;
}

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

IgxGridRowComponent が API によって IgxGridComponent に追加されている間に発生されます。 新しい IgxGridRowComponent オブジェクトのデータを返します。

rowAdded(event: IRowDataEventArgs){
   const rowInfo = event;
}

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

IgxGridRowComponent が IgxGridComponent API によって削除されたときに発生されます。 IRowDataEventArgs オブジェクトを返します。

rowDeleted(event: IRowDataEventArgs){
   const rowInfo = event;
}

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

次のようにマークアップでのイベントにバインドします。編集モードのとき、編集された行の編集不可能なセルを選択して、行を編集するとき (フィルタリング、並べ替えなどの) データ操作をし、rowEditingOverlay 内で Commit ボタンを押して、またはセルを編集ときに Enter キーを押すと発生されます。

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

[rowEditable]="true" 行が編集モードに入るときに、イベントを発生する @Output プロパティ。

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

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

public onCellClickChange(e){
    alert("The selected row has been changed!");
}

IgxGridCellComponent が選択されたときに発生します。IgxGridCellComponent を返します。

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

public onCellSelect(e){
    alert("The cell has been selected!");
}

並べ替えが UI で実行されたときに発生されます。並べ替え式を返します。

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

sortingDone(event: SortingDirection){
    const sortingDirection = event;
}

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

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

グリッドのページング UI のためにカスタム ng-template を提供できます。

<igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>

IgxGridComponent のプライマリ キーを設定する @Input プロパティ。

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

IgxToolbarComponent へのアクセスを提供します。

const gridToolbar = this.grid.toolbar;

カスタム コンテンツを表示するためにツールバーで使用されるテンプレートを返します。

let customContentTemplate = this.grid.toolbarCustomContentTemplate;