クラス IgxRowIslandComponent

階層

実装

  • AfterContentInit
  • AfterViewInit
  • OnChanges
  • OnInit
  • OnDestroy

Index

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

  • new IgxRowIslandComponent(selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, moduleRef: NgModuleRef<any>, injector: Injector, appRef: ApplicationRef, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, rowIslandAPI: IgxRowIslandAPIService, localeId: string, platform: PlatformUtil): IgxRowIslandComponent

プロパティ

actionStrips: QueryList<IgxActionStripComponent>
activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

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

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

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

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

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

備考:

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

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

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

備考:

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

例:
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
cdr: ChangeDetectorRef
cellClick: EventEmitter<IGridCellEventArgs> = ...

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

備考:

IgxGridCell を返します。

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

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

備考:

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

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

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

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

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

備考:

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

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

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

例:
<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
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.

colResizingService: IgxColumnResizingService
columnInit: EventEmitter<IgxColumnComponent> = ...

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

備考:

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

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

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

備考:

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

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

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

備考:

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

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

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

備考:

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

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

IgxColumnComponent がピン固定される前に発生します。

備考:

列を挿入するインデックスは、insertAtIndex プロパティを介して変更できます。

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

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

備考:

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

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

列のサイズが変更された後に発生します。

備考:

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

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

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

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

列の表示状態が変更された後に発生します。

備考:

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

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

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

備考:

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

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

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

備考:

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

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

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

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

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

例:
 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
dataPreLoad: EventEmitter<IForOfState> = ...

新しいデータ チャンクが仮想化から読み込まれたときに発生されます。

例:
 <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (dataPreLoad)="handleEvent()">
</igx-hierarchical-grid>
document: any
doubleClick: EventEmitter<IGridCellEventArgs> = ...

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

備考:

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

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

ドラッグされている行 ID を取得します。

備考:

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

emptyFilteredGridTemplate: TemplateRef<any>

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

例:
const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridDefaultTemplate: TemplateRef<any>

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

例:
const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridTemplate: TemplateRef<any>

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

例:
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
evenRowCSS: string = 'igx-grid__tr--even'
非推奨

バージョン 12.2.0。代わりに rowClasses プロパティを使用することをお勧めします。 グリッドですべての偶数の IgxGridRowComponent に適用されるスタイル クラスを取得または設定します。

例:
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
excelStyleHeaderIconTemplate: TemplateRef<any> = null

行展開インジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

filteredData: any[]
filtering: EventEmitter<IFilteringEventArgs> = ...

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

備考:

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

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

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

備考:

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

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

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

備考:

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

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

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

備考:

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

gridCreated: EventEmitter<IGridCreatedEventArgs> = ...

この行アイランドに基づくグリッドが生成されるときに発生されるイベント。

<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" (gridCreated)="gridCreated($event)" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>
次のメンバー:

IgxRowIslandComponent

gridInitialized: EventEmitter<IGridCreatedEventArgs> = ...

この行アイランドのグリッドが初期化された後に発生します。 発生は ngAfterViewInit で実行されます。

<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" (gridInitialized)="gridInitialized($event)" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>
次のメンバー:

IgxRowIslandComponent

gridKeydown: EventEmitter<IGridKeydownEventArgs> = ...

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

備考:

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

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

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

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

行に子があるかどうかを示すキーを取得または設定します。行に子がない場合、展開インジケーターを描画しません。

例:
<igx-hierarchical-grid #grid [data]="localData" [hasChildrenKey]="'hasEmployees'">
</igx-hierarchical-grid>
headerCollapseIndicatorTemplate: TemplateRef<any> = null

ヘッダー折りたたみインジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

headerExpandIndicatorTemplate: TemplateRef<any> = null

ヘッダー展開インジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

isPivot: boolean = false
islandPaginatorTemplate: TemplateRef<any>
islandToolbarTemplate: TemplateRef<IgxGridToolbarTemplateContext>
key: string

行データから子データの取得に使用される行アイランドのキーを設定します。

<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'">
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>
次のメンバー:

IgxRowIslandComponent

loadingGridTemplate: TemplateRef<any>

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

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

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

navigation: IgxGridNavigationService
oddRowCSS: string = 'igx-grid__tr--odd'
非推奨

バージョン 12.2.0。代わりに rowClasses プロパティを使用することをお勧めします。 グリッドですべての奇数の IgxGridRowComponent に適用されるスタイル クラスを取得または設定します。

例:
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
pageChange: EventEmitter<number> = ...
非推奨

バージョン 12.1.0。代わりに igx-paginator コンポーネントによって公開される対応する出力を使用してください。 現在のページが変更されたときに発生されます。

例:
<igx-grid (pageChange)="onPageChange($event)"></igx-grid>
public onPageChange(page: number) {
this.currentPage = page;
}
pagingDone: EventEmitter<IPageEventArgs> = ...
非推奨

バージョン 12.1.0。代わりに igx-paginator コンポーネントによって公開される対応する出力を使用してください。 ページングが実行された後に発生されます。

備考:

前のページおよび次のページを含むオブジェクトを返します。

例:
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (pagingDone)="pagingDone($event)"></igx-grid>
perPageChange: EventEmitter<number> = ...
非推奨

バージョン 12.1.0。代わりに igx-paginator コンポーネントによって公開される対応する出力を使用してください。 グリッドの perPage プロパティ値が変更されたときに発生します。

例:
<igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
public onPerPageChange(perPage: number) {
this.perPage = perPage;
}
primaryKey: any

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

例:
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
rangeSelected: EventEmitter<GridSelectionRange> = ...

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

備考:

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

rendered: EventEmitter<boolean> = ...

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

rowAdd: EventEmitter<IGridEditEventArgs> = ...

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

備考:

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

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

行が API によって追加されたときに発生されます。

備考:

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

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

IgxColumnComponent

rowCollapsedIndicatorTemplate: TemplateRef<any> = null

行折りたたみインジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

rowDelete: EventEmitter<IGridEditEventArgs> = ...

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

備考:

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

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

行が API によって削除されたときに発生されます。

備考:

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

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

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

備考:

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

rowDragStart: EventEmitter<IRowDragStartEventArgs> = ...

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

備考:

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

rowEdit: EventEmitter<IGridEditEventArgs> = ...

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

備考:

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

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

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

備考:

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

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

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

備考:

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

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

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

備考:

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

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

行展開インジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

rowPinned: EventEmitter<IPinRowEventArgs> = ...

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

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

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

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

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

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

IgxColumnComponent

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

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

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

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

備考:

IgxGridCell を返します。

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

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

備考:

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

例:
 this.grid.shouldGenerate = true;
showExpandAll: boolean = false

ヘッダーのすべて展開/縮小ボタンを描画するかどうかを取得または設定します。

備考:

デフォルト値は False です。

例:
<igx-hierarchical-grid #grid [data]="localData" [showExpandAll]="true">
</igx-hierarchical-grid>
snackbarDisplayTime: number = 6000

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

備考:

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

sortAscendingHeaderIconTemplate: TemplateRef<any> = null

列が昇順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。

sortDescendingHeaderIconTemplate: TemplateRef<any> = null

列が降順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。

sortHeaderIconTemplate: TemplateRef<any> = null

列がソートされていないと場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。

sorting: EventEmitter<ISortingEventArgs> = ...

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

備考:

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

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

ソートが完了した後に発生します。

備考:

ソート式を返します。

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

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

備考:

ソート式を返します。

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

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

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

Type declaration

    • Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。

      備考:

      要求に応じて一意の列値をロードするためのコールバックを提供します。 このプロパティが提供された場合、生成される一意の値は Excel スタイル フィルタリングによって使用されます。

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

      パラメーター

      • column: ColumnType
      • filteringExpressionsTree: IFilteringExpressionsTree
      • done: (values: any[]) => void
          • (values: any[]): void
          • パラメーター

            • values: any[]

            返却 void

      返却 void

アクセサー

  • get activeDescendant(): string
  • get allowAdvancedFiltering(): boolean
  • set allowAdvancedFiltering(value: boolean): void
  • 高度なフィルタリングが有効かどうかを示す値を取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
    

    返却 boolean

  • 高度なフィルタリングが有効かどうかを示す値を取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
    

    パラメーター

    • value: boolean

    返却 void

  • get allowFiltering(): boolean
  • set allowFiltering(value: boolean): void
  • フィルタリングが有効かどうかを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    返却 boolean

  • フィルタリングが有効かどうかを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    パラメーター

    • value: boolean

    返却 void

  • get bannerClass(): string
  • get batchEditing(): boolean
  • set batchEditing(val: boolean): void
  • get columnWidth(): string
  • set columnWidth(value: string): void
  • get dataRowList(): QueryList<IgxRowDirective>
  • get dataView(): any[]
  • グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定/固定解除が適用された行データを返します。

    例:
         const dataView = this.grid.dataView;
    

    返却 any[]

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

    備考:

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

    返却 number

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

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

    返却 string

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

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

    パラメーター

    • value: string

    返却 void

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): void
  • レコードがない場合に表示されるメッセージを取得または設定します。

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

    返却 string

  • レコードがない場合に表示されるメッセージを取得または設定します。

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

    パラメーター

    • value: string

    返却 void

  • get expandChildren(): boolean
  • set expandChildren(value: boolean): void
  • グリッドの直下の子はこの IgxRowIslandComponent のために展開または縮小に設定されたかどうかを取得します。

    const expanded = this.rowIsland.expandChildren;
    
    次のメンバー:

    IgxRowIslandComponent

    返却 boolean

  • グリッドの直下の子はこの IgxRowIslandComponent のために展開または縮小に設定するたかどうかを取得します。

    <igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
    <igx-row-island [key]="'childData'" [expandChildren]="true" #rowIsland>
    <!-- ... -->
    </igx-row-island>
    </igx-hierarchical-grid>
    次のメンバー:

    IgxRowIslandComponent

    パラメーター

    • value: boolean

    返却 void

  • get expansionStates(): Map<any, boolean>
  • set expansionStates(value: Map<any, boolean>): void
  • キーと値のペア [行 Id、展開状態] のリストを取得または設定します。

    備考:

    デフォルト状態に異なる状態のみ含まれます。 双方向バインディングをサポートします。

    例:
    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    返却 Map<any, boolean>

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

    備考:

    デフォルト状態に異なる状態のみ含まれます。 双方向バインディングをサポートします。

    例:
    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    パラメーター

    • value: Map<any, boolean>

    返却 void

  • get filterCellList(): IgxGridFilteringCellComponent[]
  • フィルター モードを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    
    備考:

    デフォルトで FilterMode.quickFilter に設定されます。

    返却 FilterMode

  • フィルター モードを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    
    備考:

    デフォルトで FilterMode.quickFilter に設定されます。

    パラメーター

    返却 void

  • get filteredSortedData(): any[]
  • get filteringRow(): IgxGridFilteringRowComponent
  • get hasColumnGroups(): boolean
  • get hasColumnLayouts(): boolean
  • get hasEditableColumns(): boolean
  • get hasFilterableColumns(): boolean
  • get hasMovableColumns(): boolean
  • IgxGridComponent に移動可能な列があるかどうかを返します。

    非推奨

    代わりに IgxGridComponent.moving を使用してください。

    例:
    const movableGrid = this.grid.hasMovableColumns;
    

    返却 boolean

  • get hasSortableColumns(): boolean
  • get hasSummarizedColumns(): boolean
  • get headerCellList(): IgxGridHeaderComponent[]
  • get headerDragContainer(): ElementRef<HTMLElement>
  • get headerGroupContainer(): ElementRef<HTMLElement>
  • get headerGroups(): IgxGridHeaderGroupComponent[]
  • get headerGroupsList(): IgxGridHeaderGroupComponent[]
  • get headerSelectorContainer(): ElementRef<HTMLElement>
  • get headerWidth(): number
  • get height(): string
  • set height(value: string): void
  • get hiddenColumnsCount(): number
  • get hideRowSelectors(): boolean
  • set hideRowSelectors(value: boolean): void
  • 行セレクターが非表示されているかどうかを取得または設定します。

    備考:

    デフォルトでは、行セレクターが表示されます。

    返却 boolean

  • 行セレクターが非表示されているかどうかを取得または設定します。

    備考:

    デフォルトでは、行セレクターが表示されます。

    パラメーター

    • value: boolean

    返却 void

  • get isFirstPage(): boolean
  • 非推奨

    バージョン 12.1.0。igx-paginator によって公開される対応するプロパティを使用してください。 現在のページが先頭かどうかを取得します。

    例:
    const firstPage = this.grid.isFirstPage;
    

    返却 boolean

  • get isLastPage(): boolean
  • 非推奨

    バージョン 12.1.0。igx-paginator によって公開される対応するプロパティを使用してください。 現在のページが最後のページかどうかを返します。

    例:
    const lastPage = this.grid.isLastPage;
    

    返却 boolean

  • get isLoading(): boolean
  • set isLoading(value: boolean): void
  • グリッドは読み込みインジケータを表すかどうかを取得または設定します。

    例:
    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
    

    返却 boolean

  • グリッドは読み込みインジケータを表すかどうかを取得または設定します。

    例:
    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
    

    パラメーター

    • value: boolean

    返却 void

  • get locale(): string
  • set locale(value: string): void
  • get nativeElement(): HTMLElement
  • get outlet(): any
  • set outlet(val: any): void
  • グリッドのオーバーレイをアタッチするアウトレットを取得します。

    備考:

    設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。

    返却 any

  • グリッドのオーバーレイをアタッチするアウトレットを設定します。

    備考:

    設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。

    パラメーター

    • val: any

    返却 void

  • get page(): number
  • set page(val: number): void
  • 非推奨

    バージョン 12.1.0。代わりに paginator コンポーネントの page プロパティを使用してください。 現在のページ インデックスを取得または設定します。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(page)]="model.page"></igx-paginator>
    </igx-grid>
    備考:

    双方向バインディングをサポートします。

    返却 number

  • 非推奨

    バージョン 12.1.0。代わりに paginator コンポーネントの page プロパティを使用してください。 現在のページ インデックスを取得または設定します。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(page)]="model.page"></igx-paginator>
    </igx-grid>
    備考:

    双方向バインディングをサポートします。

    パラメーター

    • val: number

    返却 void

  • get paging(): boolean
  • set paging(value: boolean): void
  • 非推奨

    バージョン 12.1.0。igx-paginator によって公開される対応するメソッドを使用してください。 ページング機能が有効かどうかを取得または設定します。

    備考:

    デフォルト状態は無効 (false) です。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator></igx-paginator>
    </igx-grid>

    返却 boolean

  • 非推奨

    バージョン 12.1.0。igx-paginator によって公開された対応するメソッドを使用します。 ページング機能が有効かどうかを取得または設定します。

    備考:

    デフォルト状態は無効 (false) です。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator></igx-paginator>
    </igx-grid>

    パラメーター

    • value: boolean

    返却 void

  • get perPage(): number
  • set perPage(val: number): void
  • 非推奨

    バージョン 12.1.0。代わりに paginator コンポーネントの perPage プロパティを使用してください。 ページごとに表示される項目数を取得または設定します。

    備考:

    デフォルトは 15 です。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
    </igx-grid>

    返却 number

  • 非推奨

    バージョン 12.1.0。代わりに paginator コンポーネントの perPage プロパティを使用してください。 ページごとに表示される項目数を取得または設定します。

    備考:

    デフォルトは 15 です。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
    </igx-grid>

    パラメーター

    • val: number

    返却 void

  • get pinnedColumnsCount(): number
  • get pinnedDataView(): any[]
  • グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定が適用された行データを返します。

    例:
         const pinnedDataView = this.grid.pinnedDataView;
    

    返却 any[]

  • get pinnedRowHeight(): any
  • get pinnedWidth(): number
  • 初期のピン固定構成を取得または設定します。

    備考:

    列のピン固定を開始または終了に適用できます。 一度に両側にピン固定することはできません。

    例:
    <igx-grid [pinning]="pinningConfig"></igx-grid>
    

    返却 IPinningConfig

  • 初期のピン固定構成を取得または設定します。

    備考:

    列のピン固定を開始または終了に適用できます。 一度に両側にピン固定することはできません。

    例:
    <igx-grid [pinning]="pinningConfig"></igx-grid>
    

    パラメーター

    返却 void

  • get rowDraggable(): boolean
  • set rowDraggable(val: boolean): void
  • get rowEditable(): boolean
  • set rowEditable(val: boolean): void
  • 行が編集可能かどうかを取得または設定します。

    備考:

    デフォルトの設定は false です。

    例:
    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
    

    返却 boolean

  • 行が編集可能かどうかを取得または設定します。

    備考:

    デフォルトの設定は false です。

    例:
    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
    

    パラメーター

    • val: boolean

    返却 void

  • get rowHeight(): any
  • set rowHeight(value: any): void
  • get rowList(): QueryList<IgxRowDirective>
  • get selectRowOnClick(): boolean
  • set selectRowOnClick(enabled: boolean): void
  • get selectedRows(): any[]
  • set selectedRows(rowIDs: any[]): void
  • 現在の選択状態を取得または設定します。

    備考:

    選択された行の ID (プライマリ キーまたは rowData) を表します。

    例:
    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
    

    返却 any[]

  • 現在の選択状態を取得または設定します。

    備考:

    選択された行の ID (プライマリ キーまたは rowData) を表します。

    例:
    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
    

    パラメーター

    • rowIDs: any[]

    返却 void

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

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

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

    返却 boolean

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

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

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

    パラメーター

    • value: boolean

    返却 void

  • ソートの状態を取得または設定します。

    備考:

    双方向データ バインディングをサポートします。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
    

    返却 ISortingExpression[]

  • ソートの状態を取得または設定します。

    備考:

    双方向データ バインディングをサポートします。

    例:
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
    

    パラメーター

    返却 void

  • 集計計算モードを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
    
    備考:

    デフォルトで rootAndChildLevels で、集計はルート レベルと各子レベルのために計算されます。

    返却 GridSummaryCalculationMode

  • 集計計算モードを取得または設定します。

    例:
    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
    
    備考:

    デフォルトで rootAndChildLevels で、集計はルート レベルと各子レベルのために計算されます。

    パラメーター

    返却 void

  • get summaryRowHeight(): number
  • set summaryRowHeight(value: number): void
  • get totalHeight(): any
  • get totalPages(): number
  • 非推奨

    バージョン 12.1.0。igx-paginator によって公開される対応するプロパティを使用してください。 ページの合計数を取得します。

    例:
    const totalPages = this.grid.totalPages;
    

    返却 number

  • get totalRecords(): number
  • set totalRecords(total: number): void
  • get totalWidth(): number
  • get unpinnedDataView(): any[]
  • グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/固定解除が適用された行データを返します。

    例:
         const pinnedDataView = this.grid.pinnedDataView;
    

    返却 any[]

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

メソッド

  • addRow(data: any): void
  • beginAddRowById(rowID: any, asChild?: boolean): void
  • rowID で指定された行の下に UI を生成し、追加モードに入ります。

    備考:

    レコードの子を追加するための UI の生成は、rowID を指定した場合にのみ機能します。

    備考:

    レコードの子を追加するための UI の生成は、rowID を指定した場合にのみ機能します。

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

    パラメーター

    • rowID: any

      The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view

    • オプション asChild: boolean

      Whether the record should be added as a child. Only applicable to igxTreeGrid.

    返却 void

  • beginAddRowByIndex(index: number): void
  • clearFilter(name?: string): void
  • clearSearch(): void
  • clearSort(name?: string): void
  • closeAdvancedFilteringDialog(applyChanges: boolean): void
  • collapseAll(): void
  • collapseRow(rowID: any): void
  • combineSelectedCellAndColumnData(columnData: any[], formatters?: boolean, headers?: boolean): any[]
  • deleteRow(rowSelector: any): any
  • deselectAllColumns(): void
  • deselectAllRows(onlyFilterData?: boolean): void
  • すべての行を選択解除します。

    備考:

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

    例:
    this.grid.deselectAllRows();
    

    パラメーター

    • onlyFilterData: boolean = true

    返却 void

  • deselectColumns(columns: string[] | ColumnType[]): void
  • deselectRows(rowIDs: any[]): void
  • disableSummaries(...rest: any[]): void
  • enableSummaries(...rest: any[]): void
  • endEdit(commit?: boolean, event?: Event): void
  • expandAll(): void
  • expandRow(rowID: any): void
  • filterGlobal(value: any, condition: any, ignoreCase?: any): void
  • findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
  • グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。

    備考:

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

    例:
    this.grid.findNext("financial");
    

    パラメーター

    • text: string

      the string to search.

    • オプション caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • オプション exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    返却 number

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

    備考:

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

    例:
    this.grid.findPrev("financial");
    

    パラメーター

    • text: string

      the string to search.

    • オプション caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • オプション exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    返却 number

  • getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition
  • 特定の基準に一致する、現在位置に従って次のセルを 定義する ICellPosition を返します。

    備考:

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

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

  • getPinnedWidth(takeHidden?: boolean): number
  • getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition
  • 特定の基準に一致する、現在位置に従って次のセルを 定義する ICellPosition を返します。

    備考:

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

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

  • getRowData(rowSelector: any): any
  • getSelectedColumnsData(formatters?: boolean, headers?: boolean): any[]
  • getSelectedData(formatters?: boolean, headers?: boolean): any[]
  • 現在のセル選択の配列を [{ column.field: cell.value }, ...] の形式で返します。

    備考:

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

    パラメーター

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

    返却 any[]

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

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

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

    例:
    grid.markForCheck();
    

    返却 void

  • navigateTo(rowIndex: number, visibleColIndex?: number, cb?: (args: any) => void): void
  • rowindexvisibleColumnIndex に基づいてグリッド内の位置に移動します。

    備考:

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

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

  • nextPage(): void
  • paginate(val: number): void
  • pinRow(rowID: any, index?: number, row?: RowType): boolean
  • previousPage(): void
  • refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number
  • selectAllColumns(): void
  • selectAllRows(onlyFilterData?: boolean): void
  • すべての行を選択します。

    備考:

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

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

    パラメーター

    • onlyFilterData: boolean = true

    返却 void

  • selectColumns(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void
  • selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void
  • selectedColumns(): ColumnType[]
  • toggleRow(rowID: any): void
  • unpinRow(rowID: any, row?: RowType): boolean
  • updateCell(value: any, rowSelector: any, column: string): void
  • updateRow(value: any, rowSelector: any): void
  • IgxGridRowComponent を更新します。

    備考:

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

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

    パラメーター

    • value: any
    • rowSelector: any

      correspond to rowID

    返却 void