クラス 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>

階層

Hierarchy

  • IgxGridBaseDirective
    • IgxTreeGridComponent

実装

  • GridType
  • OnInit
  • AfterViewInit
  • DoCheck
  • AfterContentInit

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

  • パラメーター

    • validationService: IgxGridValidationService
    • selectionService: IgxGridSelectionService
    • colResizingService: IgxColumnResizingService
    • gridAPI: GridServiceType
    • transactionFactory: IgxHierarchicalTransactionFactory
    • _elementRef: ElementRef<HTMLElement>
    • _zone: NgZone
    • document: any
    • cdr: ChangeDetectorRef
    • differs: IterableDiffers
    • viewRef: ViewContainerRef
    • appRef: ApplicationRef
    • injector: Injector
    • envInjector: EnvironmentInjector
    • navigation: IgxGridNavigationService
    • filteringService: IgxFilteringService
    • overlayService: IgxOverlayService
    • summaryService: IgxGridSummaryService
    • _displayDensityOptions: IDisplayDensityOptions
    • localeId: string
    • platform: PlatformUtil
    • オプション _diTransactions: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>

    返却 IgxTreeGridComponent

プロパティ

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

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

Example

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

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

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

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 }]
cascadeOnDelete: boolean = true

Input

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

<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
</igx-tree-grid>

Memberof

IgxTreeGridComponent

cdr: ChangeDetectorRef
cellClick: EventEmitter<IGridCellEventArgs> = ...

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

Remarks

IgxGridCell を返します。

Example

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

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

Remarks

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

Example

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

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

Example

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

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

Remarks

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

Example

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

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

Example

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

Input

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

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

Memberof

IgxTreeGridComponent

clipboardOptions: {
    copyFormatters: boolean;
    copyHeaders: boolean;
    enabled: boolean;
    separator: string;
} = ...

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

Type declaration

  • copyFormatters: boolean

    Apply the columns formatters (if any) on the data in the clipboard output.

  • copyHeaders: boolean

    Include the columns headers in the clipboard output.

  • enabled: boolean

    Enables/disables the copy behavior

  • separator: string

    The separator used for formatting the copy output. Defaults to \t.

columnInit: EventEmitter<IgxColumnComponent> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

<igx-grid (columnMoving)="moving($event)"></igx-grid>
columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs> = ...

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

Remarks

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

Example

<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>
columnMovingStart: EventEmitter<IColumnMovingStartEventArgs> = ...

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

Remarks

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

Example

<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>
columnPin: EventEmitter<IPinColumnCancellableEventArgs> = ...

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

Remarks

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

Example

public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
columnPinned: EventEmitter<IPinColumnEventArgs> = ...

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

Remarks

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

Example

public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
columnResized: EventEmitter<IColumnResizeEventArgs> = ...

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

Remarks

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

Example

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

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

Example

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

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

Remarks

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

Example

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs> = ...

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

Remarks

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

Example

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
contextMenu: EventEmitter<IGridCellEventArgs> = ...

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

Remarks

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

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

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

Example

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

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

Example

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
doubleClick: EventEmitter<IGridCellEventArgs> = ...

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

Remarks

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

Example

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

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

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
filtering: EventEmitter<IFilteringEventArgs> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

Remarks

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

Example

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

Input

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

<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>

Memberof

IgxTreeGridComponent

formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs> = ...

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

Example

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

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

Remarks

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

gridKeydown: EventEmitter<IGridKeydownEventArgs> = ...

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

Remarks

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

Example

 <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
gridScroll: EventEmitter<IGridScrollEventArgs> = ...

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

Example

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

Input

行に子があるかどうかを示すキーを設定する @Input プロパティ。 このプロパティは、ロードオンデマンドの場合のみ使用されます。

<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>

Memberof

IgxTreeGridComponent

id: string = ...

Input

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

<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>

Memberof

IgxTreeGridComponent

lastSearchInfo: ISearchInfo = ...

前回の検索情報を表します。

loadChildrenOnDemand: ((parentID: any, done: ((children: any[]) => void)) => void)

Type declaration

    • (parentID: any, done: ((children: any[]) => void)): void
    • An

      Input

      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));
      }

      Memberof

      IgxTreeGridComponent

      パラメーター

      • parentID: any
      • done: ((children: any[]) => void)
          • (children: any[]): void
          • パラメーター

            • children: any[]

            返却 void

      返却 void

loadingGridTemplate: TemplateRef<void>

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

Example

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

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

navigation: IgxGridNavigationService
primaryKey: any

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

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
processedRecords: Map<any, ITreeGridRecord> = ...

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

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

Memberof

IgxTreeGridComponent

processedRootRecords: ITreeGridRecord[]

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

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

Memberof

IgxTreeGridComponent

rangeSelected: EventEmitter<GridSelectionRange> = ...

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

Remarks

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

records: Map<any, ITreeGridRecord> = ...

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

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

Memberof

IgxTreeGridComponent

rendered: EventEmitter<boolean> = ...

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

rootRecords: ITreeGridRecord[]

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

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

Memberof

IgxTreeGridComponent

rowAdd: EventEmitter<IGridEditEventArgs> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

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

グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは 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

rowDelete: EventEmitter<IGridEditEventArgs> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

Remarks

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

rowDragStart: EventEmitter<IRowDragStartEventArgs> = ...

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

Remarks

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

rowEdit: EventEmitter<IGridEditEventArgs> = ...

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

Remarks

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

Example

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

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

Example

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

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

Example

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

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

Example

<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
rowStyles: any = null

グリッドの行要素に条件付きスタイル プロパティを設定します。 キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。

styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>

Memberof

IgxColumnComponent

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

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

Example

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
selected: EventEmitter<IGridCellEventArgs> = ...

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

Remarks

IgxGridCell を返します。

Example

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

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

Remarks

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

Example

 this.grid.shouldGenerate = true;
snackbarDisplayTime: number = 6000

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

Remarks

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

sorting: EventEmitter<ISortingEventArgs> = ...

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

Remarks

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

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
sortingDone: EventEmitter<ISortingExpression<any> | ISortingExpression<any>[]> = ...

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

Remarks

ソート式を返します。

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
sortingExpressionsChange: EventEmitter<ISortingExpression<any>[]> = ...

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

Remarks

ソート式を返します。

Example

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

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

Example

toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}
uniqueColumnValuesStrategy: ((column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: ((values: any[]) => void)) => void)

Type declaration

    • (column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: ((values: any[]) => void)): void
    • Gets/Sets a unique values strategy used by the Excel Style Filtering

      Remarks

      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.

      Example

      <igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
      

      パラメーター

      返却 void

validation: IgxGridValidationService
validationStatusChange: EventEmitter<IGridValidationStatusEventArgs> = ...

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

Example

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

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

Example

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

アクセサー

  • get defaultHeaderGroupMinWidth(): number
  • IgxGridHeaderGroupComponent の最小許容幅を返します。

    Remarks

    ヘッダー グループ コンポーネントの幅を制限するために内部で使用されます。 以下の値は、ヘッダーセルのデフォルトの右/左パディング値に基づいています。

    返却 number

  • get emptyFilteredGridMessage(): string
  • 返却 string

  • set emptyFilteredGridMessage(value: string): void
  • グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。

    Example

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    パラメーター

    • value: string

    返却 void

  • get showSummaryOnCollapse(): boolean
  • グループ化 / 親行が縮小されたときに集計行を表示するかどうかを制御します。

    Example

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

    Remarks

    デフォルトでは、showSummaryOnCollapse は 'false' に設定されています。これは、 グループ化/親行が縮小されたときに、集計行が表示されないことを意味します。

    返却 boolean

  • set showSummaryOnCollapse(value: boolean): void
  • パラメーター

    • value: boolean

    返却 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 の行に新しい子行を追加します。

    Memberof

    IgxTreeGridComponent

    パラメーター

    • data: any

      所定のデータで新しい 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 の行に新しい子行を追加します。
    • オプション parentRowID: any

      所定のデータで新しい 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 の行に新しい子行を追加します。

    返却 void

  • rowID で指定された行の下に UI を生成し、追加モードに入ります。

    Remarks

    行追加 UI を生成する場合は RowID、データ ビューの最初のレコードとして生成する場合は null。

    Example

    this.grid.beginAddRowById('ALFKI');
    this.grid.beginAddRowById('ALFKI', true);
    this.grid.beginAddRowById(null);

    パラメーター

    • rowID: any

      rowID で指定された行の下に UI を生成し、追加モードに入ります。

    • オプション asChild: boolean

      rowID で指定された行の下に UI を生成し、追加モードに入ります。

    返却 void

  • インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。

    Remarks

    UI を生成するインデックス。0 から 現在の行数 (this.grid.dataView.length) までの整数を設定できます。

    Example

    this.grid.beginAddRowByIndex(10);
    this.grid.beginAddRowByIndex(10, true);
    this.grid.beginAddRowByIndex(null);

    パラメーター

    • index: number

      インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。

    • オプション asChild: boolean

      インデックスで指定された行のコンテキストを持つ UI を生成し、追加モードに入ります。

    返却 void

  • 名前が提供された場合、対応する IgxColumnComponent のフィルター状態をクリアします。

    Remarks

    それ以外の場合、すべての IgxColumnComponent のフィルター状態をクリアします。

    Example

    this.grid.clearFilter();
    

    パラメーター

    • オプション name: string

      名前が提供された場合、対応する IgxColumnComponent のフィルター状態をクリアします。

    返却 void

  • 名前が提供された場合、対応する IgxColumnComponent のソート状態をクリアします。

    Remarks

    それ以外の場合、すべての IgxColumnComponent のソート状態をクリアします。

    Example

    this.grid.clearSort();
    

    パラメーター

    • オプション name: string

      名前が提供された場合、対応する IgxColumnComponent のソート状態をクリアします。

    返却 void

  • 高度なフィルタリング ダイアログを閉じます。

    パラメーター

    • applyChanges: boolean

      高度なフィルタリング ダイアログを閉じます。

    返却 void

  • ID によって行を縮小します。

    Remarks

    行 ID - primaryKey 値またはデータ レコード インスタンスです。

    Example

    this.grid.collapseRow(rowID);
    

    パラメーター

    • rowID: any

      ID によって行を縮小します。

    返却 void

  • プライマリ キーによって IgxGridRowComponent および対応するデータ レコードを削除します。

    Remarks

    primaryKey プロパティの設定が必要です。 メソッドは、rowID である rowSelector をパラメーターとして受け取ります。

    Example

    this.grid1.deleteRow(0);
    

    パラメーター

    • rowSelector: any

      プライマリ キーによって IgxGridRowComponent および対応するデータ レコードを削除します。

    返却 any

  • すべての行を選択解除します。

    Remarks

    フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。

    Example

    this.grid.deselectAllRows();
    

    パラメーター

    • onlyFilterData: boolean = true

      すべての行を選択解除します。

    返却 void

  • 指定した列で集計を無効にします。

    Example

    grid.disableSummaries('ProductName');
    

    Remarks

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

    Example

    grid.disableSummaries([{ fieldName: 'ProductName' }]);
    

    パラメーター

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

    返却 void

  • 指定した列で集計を有効にし、customSummary を適用します。

    Remarks

    customSummary を設定しない場合、列のデータ型のデフォルト集計が適用されます。

    Example

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

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

    Example

    grid.enableSummaries('ProductName');
    

    パラメーター

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

      指定した列で集計を有効にし、customSummary を適用します。

    返却 void

  • 現在の行の行トランザクションを完成し、グリッド編集がキャンセルされたかどうかを返します。

    Remarks

    commit === true の場合、未解決状態からデータ (またはトランザクション サービス) へ渡します。

    Example

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

    パラメーター

    • commit: boolean = true

      現在の行の行トランザクションを完成し、グリッド編集がキャンセルされたかどうかを返します。

    • オプション event: Event

    返却 boolean

  • ID によって行を展開します。

    Remarks

    行 ID - primaryKey 値またはデータ レコード インスタンスです。

    Example

    this.grid.expandRow(rowID);
    

    パラメーター

    • rowID: any

      ID によって行を展開します。

    返却 void

  • 単一の IgxColumnComponent をフィルターします。

    Example

    public filter(term) {
    this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
    }

    パラメーター

    • name: string

      単一の IgxColumnComponent をフィルターします。

    • value: any

      単一の IgxColumnComponent をフィルターします。

    • オプション conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree

      単一の IgxColumnComponent をフィルターします。

    • オプション ignoreCase: boolean

      単一の IgxColumnComponent をフィルターします。

    返却 void

  • 同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。

    Example

    grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
    

    パラメーター

    • value: any

      同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。

    • condition: any

      同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。

    • オプション ignoreCase: any

      同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。

    返却 void

  • グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。

    Remarks

    グリッドに文字列が何回含まれるかを返します。

    Example

    this.grid.findNext("financial");
    

    パラメーター

    • text: string

      グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。

    • オプション caseSensitive: boolean

      グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。

    • オプション exactMatch: boolean

      グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。

    返却 number

  • グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。

    Remarks

    グリッドに文字列が何回含まれるかを返します。

    Example

    this.grid.findPrev("financial");
    

    パラメーター

    • text: string

      グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。

    • オプション caseSensitive: boolean

      グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。

    • オプション exactMatch: boolean

      グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。

    返却 number

  • 条件と一致する CellType オブジェクトを返します。

    Example

    const myCell = this.grid1.getCellByColumn(2, "UnitPrice");
    

    パラメーター

    • rowIndex: number

      条件と一致する CellType オブジェクトを返します。

    • columnField: string

      条件と一致する CellType オブジェクトを返します。

    返却 CellType

  • 条件と一致する CellType オブジェクトを返します。

    Remarks

    primaryKey プロパティの設定が必要です

    Example

    grid.getCellByKey(1, 'index');
    

    パラメーター

    • rowSelector: any

      条件と一致する CellType オブジェクトを返します。

    • columnField: string

      条件と一致する CellType オブジェクトを返します。

    返却 CellType

  • 特定の基準に一致する、現在位置に従って次のセルを定義する ICellPosition を返します。

    Remarks

    getPreviousCell メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。 コールバック関数は、引数として IgxColumnComponent を受け入れます。m

    Example

     const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
    

    パラメーター

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: ((IgxColumnComponent: any) => boolean) = null
        • (IgxColumnComponent: any): boolean
        • パラメーター

          • IgxColumnComponent: any

          返却 boolean

    返却 ICellPosition

  • ピン固定領域の計算幅を取得します。

    Example

    const pinnedWidth = this.grid.getPinnedWidth();
    

    パラメーター

    • takeHidden: boolean = false

      ピン固定領域の計算幅を取得します。

    返却 number

  • 特定の基準に一致する、現在位置に従って 前のセルを定義する ICellPosition を返します。

    Remarks

    getPreviousCell メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。 コールバック関数は、引数として IgxColumnComponent を受け入れます。m

    Example

     const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
    

    パラメーター

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: ((IgxColumnComponent: any) => boolean) = null
        • (IgxColumnComponent: any): boolean
        • パラメーター

          • IgxColumnComponent: any

          返却 boolean

    返却 ICellPosition

  • 行コンポーネントに含まれているデータを返します。

    Remarks

    プライマリ キーが指定されていない場合、行セレクターは行データと一致します。

    Example

    const data = grid.getRowData(94741);
    

    パラメーター

    • rowSelector: any

      行コンポーネントに含まれているデータを返します。

    返却 any

  • 現在の列選択の配列を [{ column.field: cell.value }, ...] の形式で返します。

    Remarks

    formatters が有効な場合、セル値はそれぞれの列フォーマッタ (もしあれば) によってフォーマットされます。headers が有効な場合、列フィールドの代わりに列ヘッダーがある場合はそれを使います。

    パラメーター

    • formatters: boolean = false
    • headers: boolean = false

    返却 any[]

  • 現在のセル選択の配列を [{ column.field: cell.value }, ...] の形式で返します。

    Remarks

    formatters が有効な場合、セル値はそれぞれの列フォーマッタ (もしあれば) によってフォーマットされます。 headers が有効な場合、列フィールドの代わりに列ヘッダーがある場合はそれを使います。

    パラメーター

    • formatters: boolean = false
    • headers: boolean = false

    返却 any[]

  • レコードがピン固定されているかどうかを返します。

    パラメーター

    • rowIndex: number

      レコードがピン固定されているかどうかを返します。

    返却 boolean

  • IgxGridComponent の変更検出をトリガーします。 markForCheck を呼び出すと、グリッドのパイプも明示的にトリガーされ、すべての更新が処理されます。 不要なときに使用したり、誤用したりすると、パフォーマンスが低下する可能性があります。

    // 注意事項
    // ループ内から markForCheck を呼び出さないでください。
    // プリミティブが変更されたときに markForCheck を呼び出さないでください。
    grid.data.forEach(rec => {
    rec = newValue;
    grid.markForCheck();
    });

    // 注意事項
    // ネストされたプロパティを更新した後に markForCheck を呼び出します。
    grid.data.forEach(rec => {
    rec.nestedProp1.nestedProp2 = newValue;
    });
    grid.markForCheck();

    Example

    grid.markForCheck();
    

    返却 void

  • rowindexvisibleColumnIndex に基づいてグリッド内の位置に移動します。

    Remarks

    { targetType: GridKeydownTargetType, target: Object } を受け入れるコールバック関数を通してターゲット要素上で カスタム ロジックを実行することもできます。

    Example

     this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
    

    パラメーター

    • rowIndex: number
    • visibleColIndex: number = -1
    • cb: ((args: any) => void) = null
        • (args: any): void
        • パラメーター

          • args: any

          返却 void

    返却 void

  • 列をフィールド名によってピン固定します。

    Remarks

    操作が成功したかどうかを返します。

    Example

    this.grid.pinColumn("ID");
    

    パラメーター

    • columnName: string | IgxColumnComponent

      列をフィールド名によってピン固定します。

    • オプション index: number

      列をフィールド名によってピン固定します。

    返却 boolean

  • 既存の検索を再適用します。

    Remarks

    グリッドに前回の検索テキストが何回含まれるかを返します。

    Example

    this.grid.refreshSearch();
    

    パラメーター

    • オプション updateActiveInfo: boolean

      既存の検索を再適用します。

    • endEdit: boolean = true

    返却 number

  • すべての行を選択します。

    Remarks

    フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。

    Example

    this.grid.selectAllRows();
    this.grid.selectAllRows(false);

    パラメーター

    • onlyFilterData: boolean = true

      すべての行を選択します。

    返却 void

  • 指定した行を ID によって選択します。

    Example

    this.grid.selectRows([1,2,5], true);
    

    パラメーター

    • rowIDs: any[]

      指定した行を ID によって選択します。

    • オプション clearCurrentSelection: boolean

      指定した行を ID によって選択します。

    返却 void

  • ID によって行を切り替えます。

    Remarks

    行 ID - primaryKey 値またはデータ レコード インスタンスです。

    Example

    this.grid.toggleRow(rowID);
    

    パラメーター

    • rowID: any

      ID によって行を切り替えます。

    返却 void

  • 列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。

    Example

    this.grid.pinColumn("ID");
    

    パラメーター

    • columnName: string | IgxColumnComponent

      列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。

    • オプション index: number

      列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。

    返却 boolean

  • プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。

    Remarks

    primaryKey プロパティの設定が必要です。

    Example

    this.gridWithPK.updateCell('Updated', 1, 'ProductName');
    

    パラメーター

    • value: any

      プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。

    • rowSelector: any

      プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。

    • column: string

      プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。

    返却 void

  • IgxGridRowComponent を更新します。

    Remarks

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

    Example

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

    パラメーター

    • value: any
    • rowSelector: any

      IgxGridRowComponent を更新します。

    返却 void