クラス IgxTreeGridComponent

Ignite UI for Angular Tree Grid - ヘルプ

Ignite UI Tree Grid は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、並べ替え、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。 例:

<igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" 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-tree-grid>

階層

実装

  • DoCheck
  • OnInit
  • OnDestroy
  • AfterContentInit
  • AfterViewInit

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

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

プロパティ

autoGenerate

autoGenerate: boolean = false

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

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

IgxGridBaseComponent

cascadeOnDelete

cascadeOnDelete: boolean = true

親が削除されると子レコードも削除されるかどうかを表す @Input プロパティ。 デフォルトで true に設定されて、親とともにすべての子を削除します。

<igx-tree-grid [data]="employeeData" [primaryKey]="employeeID" [foreignKey]="parentID" cascadeOnDelete="false" [autoGenerate]="true">
</igx-tree-grid>
次のメンバー:

IgxTreeGridComponent

cdr

cdr: ChangeDetectorRef

childDataKey

childDataKey: any

IgxTreeGridComponent の子データ キーを設定する @Input プロパティ。

<igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" [autoGenerate]="true"></igx-tree-grid>
次のメンバー:

IgxTreeGridComponent

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

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

foreignKey

foreignKey: any

IgxTreeGridComponent の外部キーを設定する @Input プロパティ。

<igx-tree-grid #grid [data]="employeeData" [primaryKey]="employeeID" [foreignKey]="parentID" [autoGenerate]="true"></igx-tree-grid>
次のメンバー:

IgxTreeGridComponent

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("セルはクリックされました。");
}
次のメンバー:

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<IFocusChangeEventArgs> = new EventEmitter<IFocusChangeEventArgs>()

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

[rowEditable]="true" & endEdit(true) は呼ばれるときに、イベントを発生する @Output プロパティ。 編集モードのとき、編集された行の編集不可能なセルを選択して、行を編集するとき (フィルタリング、並べ替えなどの) データ操作をして、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("選択された行は変更されました。");
}
次のメンバー:

IgxGridBaseComponent

onRowToggle

onRowToggle: EventEmitter<IRowToggleEventArgs> = new EventEmitter<IRowToggleEventArgs>()

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

rowToggle(event: IRowToggleEventArgs){
 // 行の ID。
 const rowID = event.rowID;
 // 新しい展開状態。
 const newExpandedState = event.expanded;
 // onRowToggle をトリガーした元のイベント。
 const originalEvent = event.event;
 // イベントをキャンセルするかどうか。
 event.cancel = true;
}
<igx-tree-grid [data]="employeeData" (onRowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-tree-grid>
次のメンバー:

IgxTreeGridComponent

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("セルは選択されました。");
}
次のメンバー:

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

processedRecords

processedRecords: Map<any, ITreeGridRecord> = new Map<any, ITreeGridRecord>()

処理済み (フィルターと並べ替え済み) のルートITreeGridRecord の配列のマップを返します。

// primaryKey=2 の処理済みレコードを取得します。
const states = this.grid.processedRecords.get(2);
次のメンバー:

IgxTreeGridComponent

processedRootRecords

processedRootRecords: ITreeGridRecord[]

処理済み (フィルターと並べ替え済み) のルートITreeGridRecord の配列を返します。

// index=2 の処理済みルート レコールドを取得します。
const states = this.grid.processedRootRecords[2];
次のメンバー:

IgxTreeGridComponent

records

records: Map<any, ITreeGridRecord> = new Map<any, ITreeGridRecord>()

すべての ITreeGridRecord のマップを返します。

// primaryKey=2 のルート レベルを取得します。
const states = this.grid.records.get(2);
次のメンバー:

IgxTreeGridComponent

rootRecords

rootRecords: ITreeGridRecord[]

ITreeGridRecord のルート レベルの配列を返します。

// index=2 のルート レベルを取得します。
const states = this.grid.rootRecords[2];
次のメンバー:

IgxTreeGridComponent

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

emptyFilteredGridMessage

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

emptyGridMessage

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

expansionDepth

  • get expansionDepth(): number
  • set expansionDepth(value: number): void
  • IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。

    <igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
    次のメンバー:

    IgxTreeGridComponent

    返却 number

  • IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。

    <igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>

    パラメーター

    • value: number

    返却 void

expansionStates

  • get expansionStates(): Map<any, boolean>
  • set expansionStates(value: Map<any, boolean>): void
  • キーと値のペア [行 Id、展開状態] のリストを返します。デフォルト状態に異なる状態のみ含まれます。

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

    IgxTreeGridComponent

    返却 Map<any, boolean>

  • キーと値のペア [行 Id、展開状態] のリストを設定します。

    const states = new Map<any, boolean>();
    states.set(1, true);
    this.grid.expansionStates = states;
    次のメンバー:

    IgxTreeGridComponent

    パラメーター

    • value: Map<any, boolean>

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

hasColumnGroups

  • get hasColumnGroups(): boolean

hasEditableColumns

  • get hasEditableColumns(): boolean

hasFilterableColumns

  • get hasFilterableColumns(): boolean

hasMovableColumns

  • get hasMovableColumns(): boolean

hasSortableColumns

  • get hasSortableColumns(): 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

id

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

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

    IgxTreeGridComponent

    返却 string

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

    <igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-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, parentRowID?: any): void
  • 所定のデータで新しい 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

    パラメーター

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

    返却 void

clearFilter

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

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

    IgxGridBaseComponent

    パラメーター

    • オプション name: string

    返却 void

clearSort

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

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

    IgxGridBaseComponent

    パラメーター

    • オプション name: string

    返却 void

collapseAll

  • collapseAll(): void

collapseRow

  • collapseRow(rowID: any): void
  • 指定した rowID の IgxTreeGridRowComponent を縮小します。

    次のメンバー:

    IgxTreeGridComponent

    パラメーター

    • rowID: any

      縮小される行の識別子。

      this.grid.collapseRow(2);

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

expandAll

  • expandAll(): void

expandRow

  • expandRow(rowID: any): void
  • 指定した rowID の IgxTreeGridRowComponent を展開します。

    次のメンバー:

    IgxTreeGridComponent

    パラメーター

    • rowID: any

      展開される行の識別子。

      this.grid.expandRow(2);

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

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

    IgxGridBaseComponent

    パラメーター

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

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

    返却 number

getRowByIndex

getRowByKey

markForCheck

  • markForCheck(): void

moveColumn

nextPage

  • nextPage(): void

ngDoCheck

  • ngDoCheck(): void

paginate

  • paginate(val: number): void

pinColumn

previousPage

  • previousPage(): void

recalculateSummaries

  • recalculateSummaries(): void

reflow

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

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

    IgxGridBaseComponent

    返却 void

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

toggleColumnVisibility

toggleRow

  • toggleRow(rowID: any): void
  • 指定した rowID の IgxTreeGridRowComponent の展開状態を切り替えます。

    次のメンバー:

    IgxTreeGridComponent

    パラメーター

    • rowID: any

      切り替える行の識別子。

      this.grid.toggleRow(2);

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