クラス IgxGridComponent

Ignite UI for Angular Grid - ヘルプ

Ignite UI Grid は簡単に表データを表示して操作するために使用されます。 データをバインドした後、フィルタリング、並べ替え、および編集操作を使用して変更できます。 例:

<igx-grid [data]="employeeData" autoGenerate="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

階層

実装

  • DoCheck
  • OnInit
  • OnDestroy
  • AfterContentInit
  • AfterViewInit
  • OnInit
  • DoCheck
  • AfterContentInit

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

  • new IgxGridComponent(gridAPI: GridBaseAPIService<IgxGridBaseComponent>, selection: IgxSelectionAPIService, _transactions: TransactionService<Transaction, State>, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, _displayDensityOptions: IDisplayDensityOptions): IgxGridComponent

プロパティ

autoGenerate

autoGenerate: boolean = false

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

<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

cdr

cdr: ChangeDetectorRef

columnHidingTitle

columnHidingTitle: string = ""

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

<igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>
次のメンバー:

IgxGridBaseComponent

columnPinningTitle

columnPinningTitle: string = ""

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

<igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

data

data: any[]

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

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

IgxGridBaseComponent

document

document: any

dropAreaTemplate

dropAreaTemplate: TemplateRef<any>

GroupBy ドロップ領域として描画されるテンプレートを設定する @Input プロパティ。 注: GroupBy 領域を表示するためにグリッドでグループ可能な列が 1 列以上必要です。 `html <igx-grid [dropAreaTemplate]="dropAreaRef"> <igx-column [groupable]="true" field="ID">

<ng-template #myDropArea> Custom drop area!

```ts
@ViewChild('myDropArea', { read: TemplateRef })
public dropAreaRef: TemplateRef<any>;
次のメンバー:

IgxGridComponent

emptyFilteredGridTemplate

emptyFilteredGridTemplate: TemplateRef<any>

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

const emptyTempalte = this.grid.emptyGridTemplate;
次のメンバー:

IgxGridBaseComponent

emptyGridDefaultTemplate

emptyGridDefaultTemplate: TemplateRef<any>

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

const emptyTempalte = this.grid.emptyGridTemplate;
次のメンバー:

IgxGridBaseComponent

emptyGridTemplate

emptyGridTemplate: TemplateRef<any>

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

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

evenRowCSS

evenRowCSS: string = "igx-grid__tr--even"

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

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

filteringService

filteringService: IgxFilteringService

groupsExpanded

groupsExpanded: boolean = true

作成したグループを展開または縮小として描画されるかどうかを決定する @Input プロパティ。 デフォルトの描画状態は展開です。

<igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridComponent

groupsRecords

groupsRecords: IGroupByRecord[] = []

グループ化レコードの階層表現。

let groupRecords = this.grid.groupsRecords;
次のメンバー:

IgxGridComponent

oddRowCSS

oddRowCSS: string = "igx-grid__tr--odd"

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

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onCellClick

onCellClick: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

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!");
}
次のメンバー:

IgxGridBaseComponent

onCellEdit

onCellEdit: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

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>
次のメンバー:

IgxGridBaseComponent

onCellEditCancel

onCellEditCancel: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

グリッドで 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>
次のメンバー:

IgxGridComponent

onCellEditEnter

onCellEditEnter: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

グリッドで 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>
次のメンバー:

IgxGridComponent

onColumnInit

onColumnInit: EventEmitter<IgxColumnComponent> = new EventEmitter<IgxColumnComponent>()

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

<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;
}
次のメンバー:

IgxGridBaseComponent

onColumnMoving

onColumnMoving: EventEmitter<IColumnMovingEventArgs> = new EventEmitter<IColumnMovingEventArgs>()

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

moving(event: IColumnMovingEventArgs){
    const moving = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onColumnMovingEnd

onColumnMovingEnd: EventEmitter<IColumnMovingEndEventArgs> = new EventEmitter<IColumnMovingEndEventArgs>()

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

movingEnds(event: IColumnMovingEndEventArgs){
    const movingEnds = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onColumnMovingStart

onColumnMovingStart: EventEmitter<IColumnMovingStartEventArgs> = new EventEmitter<IColumnMovingStartEventArgs>()

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

movingStart(event: IColumnMovingStartEventArgs){
    const movingStarts = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onColumnPinning

onColumnPinning: EventEmitter<IPinColumnEventArgs> = new EventEmitter<IPinColumnEventArgs>()

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

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}
次のメンバー:

IgxGridBaseComponent

onColumnResized

onColumnResized: EventEmitter<IColumnResizeEventArgs> = new EventEmitter<IColumnResizeEventArgs>()

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

resizing(event: IColumnResizeEventArgs){
    const grouping = event;
}
<igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onColumnVisibilityChanged

onColumnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = new EventEmitter<IColumnVisibilityChangedEventArgs>()

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

visibilityChanged(event: IColumnVisibilityChangedEventArgs){
   const visiblity = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onContextMenu

onContextMenu: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

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

contextMenu(event: IGridCellEventArgs){
    const resizing = event;
    console.log(resizing);
}
<igx-grid #grid [data]="localData" (onContextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onDataPreLoad

onDataPreLoad: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

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

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>
次のメンバー:

IgxGridBaseComponent

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onDoubleClick

onDoubleClick: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

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

dblClick(event: IGridCellEventArgs){
    const dblClick = event;
    console.log(dblClick);
}
<igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onFilteringDone

onFilteringDone: EventEmitter<IFilteringExpressionsTree> = new EventEmitter<IFilteringExpressionsTree>()

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

filteringDone(event: IFilteringExpressionsTree){
    const filteringTree = event;
}
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onFocusChange

onFocusChange: EventEmitter<IGridFocusChangeEventArgs> = new EventEmitter<IGridFocusChangeEventArgs>()

onGroupingDone

onGroupingDone: EventEmitter<IGroupingDoneEventArgs> = new EventEmitter<IGroupingDoneEventArgs>()

Group By API を使用して新しい IgxColumnComponent のグループ化/グループ解除、または複数列がグループ化/グループ化解除されたときに発生します。 groupBy()またはclearGrouping()API メソッドを呼び出して引数として渡すことにより複数列がz一度にグループ化された場合にonGroupingDoneイベントは一度のみ発生します。 イベント引数は、ISortingExpressionとグループ化/グループ解除操作と関連するIgxColumnComponentを含むexpressionsgroupedColumnsungroupedColumnsプロパティを提供します。groupedColumnsungroupedColumns` は新しく変更 (最近のグループ化/グループ解除操作によって影響) された列のみ表示し、現在グループ化/グループ解除されているすべての列ではありません。 columns.

groupingDone(event: IGroupingDoneEventArgs){
    const expressions = event.expressions;
    //新しくグループ化された列
    const groupedColumns = event.groupedColumns;
    //新しくグループ解除された列
    const ungroupedColumns = event.ungroupedColumns;
}
<igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridComponent

onPagingDone

onPagingDone: EventEmitter<IPageEventArgs> = new EventEmitter<IPageEventArgs>()

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

pagingDone(event: IPageEventArgs){
    const paging = event;
}
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onRowAdded

onRowAdded: EventEmitter<IRowDataEventArgs> = new EventEmitter<IRowDataEventArgs>()

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

rowAdded(event: IRowDataEventArgs){
   const rowInfo = event;
}
<igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onRowDeleted

onRowDeleted: EventEmitter<IRowDataEventArgs> = new EventEmitter<IRowDataEventArgs>()

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

rowDeleted(event: IRowDataEventArgs){
   const rowInfo = event;
}
<igx-grid #grid [data]="localData" (onRowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

onRowEdit

onRowEdit: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

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

現在の行と状態を発生します。 次のようにマークアップでのイベントにバインドします。

<igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="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>
     editDone(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const newValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
次のメンバー:

IgxGridBaseComponent

onRowEditCancel

onRowEditCancel: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

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

現在の行と状態を発生します。 次のようにマークアップでのイベントにバインドします。

<igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="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>
     editCancel(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const cancelValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
次のメンバー:

IgxGridBaseComponent

onRowEditEnter

onRowEditEnter: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

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

現在の行と状態を発生します。 次のようにマークアップでのイベントにバインドします。

<igx-grid #grid3 (onRowEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="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>
     editStart(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const cancelValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
次のメンバー:

IgxGridComponent

onRowSelectionChange

onRowSelectionChange: EventEmitter<IRowSelectionEventArgs> = new EventEmitter<IRowSelectionEventArgs>()

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

<igx-grid #grid (onRowSelectionChange)="onRowClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
public onCellClickChange(e){
    alert("The selected row has been changed!");
}
次のメンバー:

IgxGridBaseComponent

onSelection

onSelection: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

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!");
}
次のメンバー:

IgxGridBaseComponent

onSortingDone

onSortingDone: EventEmitter<ISortingExpression | ISortingExpression[]> = new EventEmitter<ISortingExpression | Array<ISortingExpression>>()

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

<igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>
sortingDone(event: SortingDirection){
    const sortingDirection = event;
}
次のメンバー:

IgxGridBaseComponent

onToolbarExporting

onToolbarExporting: EventEmitter<IGridToolbarExportEventArgs> = new EventEmitter<IGridToolbarExportEventArgs>()

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

toolbarExporting(event: IGridToolbarExportEventArgs){
    const toolbarExporting = event;
}
次のメンバー:

IgxGridBaseComponent

paginationTemplate

paginationTemplate: TemplateRef<any>

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

<igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>
次のメンバー:

IgxGridBaseComponent

primaryKey

primaryKey: any

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

<igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="6" [autoGenerate]="true"></igx-grid>
次のメンバー:

IgxGridBaseComponent

selection

selection: IgxSelectionAPIService

toolbar

toolbar: IgxGridToolbarComponent = null

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

const gridToolbar = this.grid.toolbar;
次のメンバー:

IgxGridBaseComponent

toolbarCustomContentTemplate

toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective

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

let customContentTemplate = this.grid.toolbarCustomContentTemplate;
次のメンバー:

IgxGridBaseComponent

アクセサー

allowFiltering

  • get allowFiltering(): boolean
  • set allowFiltering(value: boolean): void

bannerClass

  • get bannerClass(): string

calcPinnedContainerMaxWidth

  • get calcPinnedContainerMaxWidth(): number

columnHiding

  • get columnHiding(): boolean
  • set columnHiding(value: boolean): void
  • IgxGridComponent の列非表示 UI が有効かどうかを返します。 デフォルトで無効 (false) に設定されます。

    let gridColHiding = this.grid.columnHiding;
    次のメンバー:

    IgxGridBaseComponent

    返却 boolean

  • IgxGridComponent の列非表示 UI が有効かどうかを設定します。 UI を操作するには、以下の例のようにツールバーを有効にする必要があります。

    <igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: boolean

    返却 void

columnPinning

  • get columnPinning(): boolean
  • set columnPinning(value: boolean): void
  • 定義済みの列固定 UI をツールバーに表示するかどうかを返します。

     let colPinning = this.grid.columnPinning;
    次のメンバー:

    IgxGridBaseComponent

    返却 boolean

  • 定義済みの列固定 UI をツールバーに表示するかどうかを設定します。 デフォルトで無効です。

    <igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: boolean

    返却 void

columnWidth

  • get columnWidth(): string
  • set columnWidth(value: string): void
  • IgxGridComponent の列のデフォルト幅を設定する @Input プロパティ。

    <igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
    次のメンバー:

    IgxGridBaseComponent

    返却 string

  • IgxGridComponent の列のデフォルト幅を設定する @Input プロパティ。

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

    パラメーター

    • value: string

    返却 void

columns

dataRowList

  • get dataRowList(): QueryList<any>

defaultRowHeight

  • get defaultRowHeight(): number

displayDensity

dropAreaMessage

  • get dropAreaMessage(): string
  • set dropAreaMessage(value: string): void
  • 列にドラッグできる GroupBy のドロップ領域に表示されるメッセージを返すアクセサー。

    返却 string

  • 列にドラッグできる GroupBy のドロップ領域に表示されるメッセージを設定する @Input プロパティ。 注: GroupBy 領域を表示するためにグリッドでグループ可能な列が 1 列以上必要です。

    <igx-grid dropAreaMessage="Drop here to group!">
         <igx-column [groupable]="true" field="ID"></igx-column>
    </igx-grid>
    次のメンバー:

    IgxGridComponent

    パラメーター

    • value: string

    返却 void

dropAreaVisible

  • get dropAreaVisible(): boolean
  • グリッドのグループ化ドロップ領域が表示されるかどうかを返します。

    const dropVisible = this.grid.dropAreaVisible;
    次のメンバー:

    IgxGridComponent

    返却 boolean

emptyFilteredGridMessage

  • get emptyFilteredGridMessage(): string
  • set emptyFilteredGridMessage(value: string): void

emptyGridMessage

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): void

exportCsv

  • get exportCsv(): boolean
  • set exportCsv(newValue: boolean): void

exportCsvText

  • get exportCsvText(): string
  • set exportCsvText(newValue: string): void

exportExcel

  • get exportExcel(): boolean
  • set exportExcel(newValue: boolean): void

exportExcelText

  • get exportExcelText(): string
  • set exportExcelText(newValue: string): void

exportText

  • get exportText(): string
  • set exportText(newValue: string): void

filterCellList

  • get filterCellList(): IgxGridFilteringCellComponent[]

filteredData

  • get filteredData(): any
  • set filteredData(value: any): void

filteredSortedData

  • get filteredSortedData(): any[]

filteringExpressionsTree

filteringLogic

groupAreaTemplate

  • get groupAreaTemplate(): TemplateRef<any>
  • set groupAreaTemplate(template: TemplateRef<any>): void
  • IgxGridComponent のグループ領域のテンプレート参照を返します。

    const groupAreaTemplate = this.grid.groupAreaTemplate;
    次のメンバー:

    IgxGridComponent

    返却 TemplateRef<any>

  • IgxGridComponent のグループ領域のテンプレート参照を設定します。

    this.grid.groupAreaTemplate = myAreaTemplate.
    次のメンバー:

    IgxGridComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

groupRowTemplate

  • get groupRowTemplate(): TemplateRef<any>
  • set groupRowTemplate(template: TemplateRef<any>): void
  • IgxGridComponent のグループ行のテンプレート参照を返します。

    const groupRowTemplate = this.grid.groupRowTemplate;
    次のメンバー:

    IgxGridComponent

    返却 TemplateRef<any>

  • IgxGridComponent のグループ IgxGridRowComponent のテンプレート参照を設定します。

    this.grid.groupRowTemplate = myRowTemplate.
    次のメンバー:

    IgxGridComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

groupingExpansionState

  • グループ行の展開状態のリストを返します。 デフォルト状態と異なる groupsExpanded によって制御されるか、ユーザーが変更された状態のみを含みます。 展開状態 (expanded: ブール値) およびグループ行の一意識別子 (Array) を含みます。

    const groupExpState = this.grid.groupingExpansionState;
    次のメンバー:

    IgxGridComponent

    返却 IGroupByExpandState[]

  • グループ行の展開状態のリストを設定します。

         this.grid.groupingExpansionState = [{
         expanded: false,
         hierarchy: [{ fieldName: 'ID', value: 1 }]
      }];
    // `IgxGridRowComponent` を取得するため DataUtil.getHierarchy(groupRow) を使用できます。
    次のメンバー:

    IgxGridComponent

    パラメーター

    返却 void

groupingExpressions

  • IgxGridComponent のグループ化状態を返します。

    let groupByState = this.grid.groupingExpressions;
    次のメンバー:

    IgxGridComponent

    返却 IGroupingExpression[]

  • IgxGridComponent の状態によってグループ化を設定し、適切な引数で onGroupingDone イベントを発生します。

    this.grid.groupingExpressions = [{
        fieldName: "ID",
        dir: SortingDirection.Asc,
        ignoreCase: false
    }];
    次のメンバー:

    IgxGridComponent

    パラメーター

    返却 void

groupsRowList

  • get groupsRowList(): QueryList<any>
  • すべてのグループ行のリスト。

    const groupList = this.grid.groupsRowList;
    次のメンバー:

    IgxGridComponent

    返却 QueryList<any>

hasColumnGroups

  • get hasColumnGroups(): boolean

hasEditableColumns

  • get hasEditableColumns(): boolean

hasFilterableColumns

  • get hasFilterableColumns(): boolean

hasGroupableColumns

  • get hasGroupableColumns(): boolean
  • IgxGridComponent にグループ化可能な列があるかどうかを返します。

    const groupableGrid = this.grid.hasGroupableColumns;
    次のメンバー:

    IgxGridComponent

    返却 boolean

hasMovableColumns

  • get hasMovableColumns(): boolean

hasSortableColumns

  • get hasSortableColumns(): boolean

hasSummarizedColumns

  • get hasSummarizedColumns(): boolean

headerCellList

  • get headerCellList(): IgxGridHeaderComponent[]

headerGroupsList

  • get headerGroupsList(): IgxGridHeaderGroupComponent[]

headerWidth

  • get headerWidth(): number

height

  • get height(): string
  • set height(value: string): void

hiddenColumnsCount

  • get hiddenColumnsCount(): number

hiddenColumnsText

  • get hiddenColumnsText(): string
  • set hiddenColumnsText(value: string): void

hideGroupedColumns

  • get hideGroupedColumns(): boolean
  • set hideGroupedColumns(value: boolean): void
  • グループ化された列が非表示に設定されるかどうかの @Input プロパティ。 デフォルト値は "false"です。

    <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
    次のメンバー:

    IgxGridComponent

    返却 boolean

  • グループ化された列が非表示に設定されるかどうかの @Input プロパティ。 デフォルト値は "false"です。

    <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>

    パラメーター

    • value: boolean

    返却 void

id

  • get id(): string
  • set id(value: string): void
  • id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
    次のメンバー:

    IgxGridComponent

    返却 string

  • id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます

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

    パラメーター

    • value: string

    返却 void

isFirstPage

  • get isFirstPage(): boolean

isLastPage

  • get isLastPage(): boolean

nativeElement

  • get nativeElement(): any

page

  • get page(): number
  • set page(val: number): void

paging

  • get paging(): boolean
  • set paging(value: boolean): void

perPage

  • get perPage(): number
  • set perPage(val: number): void
  • IgxGridComponent でページごとに表示される項目の数を返します。 デフォルトは 15 です。

    let itemsPerPage = this.grid.perPage;
    次のメンバー:

    IgxGridBaseComponent

    返却 number

  • IgxGridComponent でページごとに表示される項目の数を設定します。

    <igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • val: number

    返却 void

pinnedColumns

pinnedColumnsText

  • get pinnedColumnsText(): string
  • set pinnedColumnsText(value: string): void
  • IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを返します。

    const pinnedText = this.grid.pinnedColumnsText;
    次のメンバー:

    IgxGridBaseComponent

    返却 string

  • IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを設定します。

    <igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: string

    返却 void

pinnedWidth

  • get pinnedWidth(): number

resourceStrings

rowEditable

  • get rowEditable(): boolean
  • set rowEditable(val: boolean): void

rowHeight

  • get rowHeight(): any
  • set rowHeight(value: any): void

rowList

  • get rowList(): QueryList<any>

rowSelectable

  • get rowSelectable(): boolean
  • set rowSelectable(val: boolean): void

selectedCells

showRowCheckboxes

  • get showRowCheckboxes(): boolean

showToolbar

  • get showToolbar(): boolean
  • set showToolbar(newValue: boolean): void

sortingExpressions

template

  • get template(): TemplateRef<any>

toolbarTitle

  • get toolbarTitle(): string
  • set toolbarTitle(newValue: string): void

totalItemCount

  • get totalItemCount(): number
  • set totalItemCount(count: number): void
  • データ ソース内のレコードの総数を返します。 リモートのグリッド仮想化のみに操作します。

    const itemCount = this.grid1.totalItemCount;
    次のメンバー:

    IgxGridBaseComponent

    返却 number

  • データ ソース内のレコードの総数を設定します。 グリッドがリモートでバインドされる場合、仮想化のためにこのプロパティが必須です。

    this.grid1.totalItemCount = 55;
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • count: number

    返却 void

totalPages

  • get totalPages(): number

totalRecords

  • get totalRecords(): number

totalWidth

  • get totalWidth(): number

transactions

unpinnedAreaMinWidth

  • get unpinnedAreaMinWidth(): number

unpinnedColumns

unpinnedWidth

  • get unpinnedWidth(): number

visibleColumns

width

  • get width(): string
  • set width(value: string): void

メソッド

addRow

  • addRow(data: any, parentID?: any): void
  • 新しい IgxGridRowComponent を作成し、データ レコードをデータ ソースの終了に追加します。

    const record = {
        ID: this.grid1.data[this.grid1.data.length - 1].ID + 1,
        Name: this.newRecord
    };
    this.grid1.addRow(record);
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • data: any
    • オプション parentID: any

    返却 void

clearFilter

  • clearFilter(name?: string): void
  • name が提供された場合、対応する IgxColumnComponent のフィルター状態をクリアします。それ以外の場合、すべての IgxColumnComponent のフィルター状態をクリアします。

    this.grid.clearFilter();
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • オプション name: string

    返却 void

clearGrouping

  • clearGrouping(name?: string | Array<string>): void
  • パラメーターが渡されない場合、グリッドのグループ化をすべてクリアします。 パラメーターが提供された場合、特定の列のグループ化をクリアします。

    this.grid.clearGrouping(); //clears all grouping
    this.grid.clearGrouping("ID"); //ungroups a single column
    this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns

    パラメーター

    • オプション name: string | Array<string>

    返却 void

clearSearch

  • clearSearch(): void

clearSort

  • clearSort(name?: string): void
  • name が提供された場合、対応する IgxColumnComponent の並べ替え状態をクリアします。それ以外の場合、すべての IgxColumnComponent の並べ替え状態をクリアします。

    this.grid.clearSort();
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • オプション name: string

    返却 void

deleteRow

  • deleteRow(rowSelector: any): void
  • プライマリ キーによって IgxGridRowComponent および相対するデータ レコードを削除します。 primaryKey プロパティの設定が必要です。 メソッドは、rowID である rowSelector をパラメーターとして受け取ります。

    this.grid1.deleteRow(0);
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • rowSelector: any

    返却 void

deselectAllRows

  • deselectAllRows(): void
  • すべての行を選択解除します。

    this.grid.deselectAllRows();

    注: フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。

    返却 void

deselectRows

  • deselectRows(rowIDs: any[]): void

disableSummaries

  • disableSummaries(...rest: any[]): void
  • 指定した列で集計を無効にします。

    grid.disableSummaries('ProductName');

    配列の列で集計を無効にします。

    grid.disableSummaries([{ fieldName: 'ProductName' }]);
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • 残りの引数 ...rest: any[]

    返却 void

enableSummaries

  • enableSummaries(...rest: any[]): void
  • 指定した列で集計を有効にし、customSummary を適用します。 customSummary を設定しない場合、列のデータ型のデフォルト集計が適用されます。

    grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);

    配列の列で集計を有効にします。

    grid.enableSummaries('ProductName');
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • 残りの引数 ...rest: any[]

    返却 void

endEdit

  • endEdit(commit?: boolean, event?: Event): void
  • 現在の行の行トランザクションを完成します。 commit === trueの場合、未解決状態からデータ (またはトランザクション サービス) へ渡します。

    イベントにバインドします。

    <button igxButton (click)="grid.endEdit(true)">Commit Row</button>

    パラメーター

    • デフォルト値 commit: boolean = true
    • オプション event: Event

    返却 void

filter

filterGlobal

  • filterGlobal(value: any, condition?: any, ignoreCase?: any): void
  • 同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。

    grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: any
    • オプション condition: any
    • オプション ignoreCase: any

    返却 void

findNext

  • findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
  • グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。 グリッドに文字列が何回含まれるかを返します。

    this.grid.findNext("financial");
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • text: string

      検索する文字列。

    • オプション caseSensitive: boolean

      オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルトは false)。

    • オプション exactMatch: boolean

      オプションで、テキストは値全体に一致するかどうか (デフォルトは false)。

    返却 number

findPrev

  • findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
  • グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。 グリッドに文字列が何回含まれるかを返します。

    this.grid.findPrev("financial");
    `
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • text: string

      検索する文字列。

    • オプション caseSensitive: boolean

      オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルトは false)。

    • オプション exactMatch: boolean

      オプションで、テキストは値全体に一致するかどうか (デフォルトは false)。

    返却 number

getCellByColumn

getCellByKey

  • 指定されたプライマリ キーおよび列フィールドによって IgxGridCellComponent オブジェクトを返します。 primaryKey プロパティの設定が必要です。

    grid.getCellByKey(1, 'index');
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • rowSelector: any

      いずれかの rowID に一致します。

    • columnField: string

    返却 IgxGridCellComponent

getColumnByName

getPinnedWidth

  • getPinnedWidth(takeHidden?: boolean): number
  • ピン固定領域の計算幅を取得します。

    const pinnedWidth = this.grid.getPinnedWidth();
    次のメンバー:

    IgxGridComponent

    パラメーター

    • デフォルト値 takeHidden: boolean = false

      ピン固定の領域の非表示の列を考慮に入れるかどうか。

    返却 number

getRowByIndex

getRowByKey

groupBy

  • 新しい IgxColumnComponent を提供された式によってグループ化、または既存の式を変更します。 ISortingExpression の配列が渡されると複数列を一度にグループ化できるようになります。 このメソッドが同じ引数で複数回呼びだされた場合、onGroupingDone イベントは 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 }
    ]);
    次のメンバー:

    IgxGridComponent

    パラメーター

    返却 void

isExpandedGroup

  • グループが展開されているかどうかを返します。

    public groupRow: IGroupByRecord;
    const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
    次のメンバー:

    IgxGridComponent

    パラメーター

    返却 boolean

markForCheck

  • markForCheck(): void

moveColumn

nextPage

  • nextPage(): void

ngDoCheck

  • ngDoCheck(): void

ngOnInit

  • ngOnInit(): void

paginate

  • paginate(val: number): void

pinColumn

previousPage

  • previousPage(): void

recalculateSummaries

  • recalculateSummaries(): void

reflow

  • reflow(): void
  • グリッドの幅/高さのサイズを再計算します。グリッドのサイズに影響する DOM 要素を手動的にサイズ変更するときに実行します。

    this.grid.reflow();
    次のメンバー:

    IgxGridBaseComponent

    返却 void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean): number
  • 既存の検索を再適用します。 グリッドに前回の検索テキストが何回含まれるかを返します。

    this.grid.refreshSearch();
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • オプション updateActiveInfo: boolean

    返却 number

selectAllRows

  • selectAllRows(): void
  • すべての行を選択します。 注: フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。

    this.grid.selectAllRows();
    次のメンバー:

    IgxGridBaseComponent

    返却 void

selectRows

  • selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void
  • 指定した行を ID によって選択します。

    this.grid.selectRows([1,2,5], true);
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • rowIDs: any[]
    • オプション clearCurrentSelection: boolean

      True の場合、現在の選択をクリアします。

    返却 void

selectedRows

  • selectedRows(): any[]

sort

toggleAllGroupRows

  • toggleAllGroupRows(): void
  • すべてのグループ行の展開状態を再帰的に切り替えます。

    this.grid.toggleAllGroupRows;
    次のメンバー:

    IgxGridComponent

    返却 void

toggleColumnVisibility

toggleGroup

  • グループの展開状態を切り替えます。

    public groupRow: IGroupByRecord;
    const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
    次のメンバー:

    IgxGridComponent

    パラメーター

    返却 void

unpinColumn

updateCell

  • updateCell(value: any, rowSelector: any, column: string): void
  • プライマリ キーによって IgxGridRowComponent および対応するデータ レコードを更新します。 primaryKey プロパティの設定が必要です。

    this.gridWithPK.updateCell('Updated', 1, 'ProductName');
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: any

      設定する新しい値。

    • rowSelector: any

      rowID に対応します。

    • column: string

      列フィールドに対応します。

    返却 void

updateRow

  • updateRow(value: any, rowSelector: any): void
  • rowSelector パラメーターおよび渡された値を持つデータ ソース レコードによって指定される IgxGridRowComponent を更新します。 このメソッドは、プライマリ キーがグリッドで指定されている場合のみ要求した更新を適用します。

    grid.updateRow({
          ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
      }, 1);
    次のメンバー:

    IgxGridBaseComponent

    パラメーター

    • value: any
    • rowSelector: any

      rowID に対応します。

    返却 void