Class IgxPivotGridComponent

Pivot Grid は、ピボット テーブル ビューでデータを表示および操作する方法を提供します。

Igx Module

IgxPivotGridModule

Igx Group

グリッド & リスト

Igx Keywords

pivot, grid, table

Igx Theme

igx-grid-theme

備考

Ignite UI Pivot Grid は、シンプルなフラット データをグループ化してピボット テーブルに集計するために使用されます。データがバインドされ、ディメンションと値が構成されると、ソートとフィルタリングによって操作できます。

<igx-pivot-grid [data]="data" [pivotConfiguration]="configuration">
</igx-pivot-grid>

階層

Hierarchy

  • IgxGridBaseDirective
    • IgxPivotGridComponent

実装

  • OnInit
  • AfterContentInit
  • GridType
  • AfterViewInit

コンストラクター

アクセサー

アクセサー

メソッド

コンストラクター

  • パラメーター

    • validationService: IgxGridValidationService
    • selectionService: IgxGridSelectionService
    • colResizingService: IgxPivotColumnResizingService
    • gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>
    • transactionFactory: IgxFlatTransactionFactory
    • elementRef: ElementRef<HTMLElement>
    • zone: NgZone
    • document: any
    • cdr: ChangeDetectorRef
    • differs: IterableDiffers
    • viewRef: ViewContainerRef
    • injector: Injector
    • envInjector: EnvironmentInjector
    • navigation: IgxPivotGridNavigationService
    • filteringService: IgxFilteringService
    • textHighlightService: IgxTextHighlightService
    • overlayService: IgxOverlayService
    • summaryService: IgxGridSummaryService
    • _displayDensityOptions: IDisplayDensityOptions
    • localeId: string
    • platform: PlatformUtil
    • Optional _diTransactions: TransactionService<Transaction, State>

    返却 IgxPivotGridComponent

アクセサー

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

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

<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = ...

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

備考

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

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

変更検出機能を提供します。 変更検出ツリーは、変更がチェックされるすべてのビューを収集します。 プロパティは変更できません (読み取り専用)。

cellClick: EventEmitter<IGridCellEventArgs> = ...

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

備考

IgxGridCell を返します。

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

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

columnInit: EventEmitter<IgxColumnComponent> = ...

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

備考

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

<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
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>
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>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
dimensionInit: EventEmitter<IPivotDimension> = ...

ディメンションが初期化された後に発生します。

備考

初期化されようとしているディメンションを発生します。

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionInit)="dimensionInit($event)"></igx-pivot-grid>
dimensionsChange: EventEmitter<IDimensionsChange> = ...

グリッド チップ領域によってディメンション コレクションが変更されたときに発生します。

備考

新しいディメンション コレクションとそのタイプを返します。

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsChange)="dimensionsChange($event)"></igx-grid>
dimensionsSortingExpressionsChange: EventEmitter<ISortingExpression<any>[]> = ...

ディメンションがソートされたときに発生します。

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid>
doubleClick: EventEmitter<IGridCellEventArgs> = ...

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

備考

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

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

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

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

ピボット グリッドが空の場合にカスタム テンプレートを取得または設定します。

<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>
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>
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs> = ...

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

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

グリッドに API メソッドを提供するグリッド サービス タイプを表します。

gridCopy: EventEmitter<IGridClipboardEvent> = ...

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

備考

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

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>
lastSearchInfo: ISearchInfo = ...

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

loadingGridTemplate: TemplateRef<void>

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

<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
navigation: IgxGridNavigationService
pivotConfigurationChange: EventEmitter<IPivotConfigurationChangedEventArgs> = ...

pivotConfiguration プロパティのいずれかがグリッド チップ領域を介して変更されたときに発生します。

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(pivotConfigurationChanged)="configurationChanged($event)"></igx-grid>
primaryKey: any

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

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

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

備考

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

rendered: EventEmitter<boolean> = ...

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

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

rowClick: EventEmitter<IGridRowEventArgs> = ...

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

備考

IgxGridRow を返します。

<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [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>
showPivotConfigurationUI: boolean = true
sorting: EventEmitter<ISortingEventArgs> = ...

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

備考

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

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

ソートが完了した後に発行されます。

備考

ソート式を返します。

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

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

備考

ソート式を返します。

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
uniqueColumnValuesStrategy: ((column, filteringExpressionsTree, done) => void)

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

備考

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

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

Type declaration

    • (column, filteringExpressionsTree, done): void
    • パラメーター

      返却 void

validation: IgxGridValidationService

グリッドの検証サービスを表します。この型には、レコードを検証するためのプロパティとメソッド (ロジック) が含まれます

validationStatusChange: EventEmitter<IGridValidationStatusEventArgs> = ...

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

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

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

<igx-grid #grid validationTrigger='blur'></igx-grid>
valueChipTemplate: TemplateRef<IgxPivotGridValueTemplateContext>

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

<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>
valueInit: EventEmitter<IPivotValue> = ...

値が初期化された後に発生します。

備考

値が初期化される前に発生します。

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valueInit)="valueInit($event)"></igx-pivot-grid>
valuesChange: EventEmitter<IValuesChange> = ...

値コレクションがグリッド チップ領域によって変更されたときに発生します。

備考

新しいディメンションを返します。

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

アクセサー

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

    備考

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

    返却 number

メソッド

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

    備考

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

    this.grid.clearFilter();
    

    パラメーター

    • Optional name: string

    返却 void

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

    備考

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

    this.grid.clearSort();
    

    パラメーター

    • Optional name: string

    返却 void

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

    備考

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

    this.grid.deselectAllRows();
    

    パラメーター

    • onlyFilterData: boolean = true

    返却 void

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

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

    パラメーター

    • value: any
    • condition: any
    • Optional ignoreCase: any

    返却 void

  • 表示密度の値に基づいて --component-size CSS 変数を設定します。

    返却 "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

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

    備考

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

    const data = grid.getRowData(94741);
    

    パラメーター

    • rowSelector: any

      rowID.に対応します。

    返却 any

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

    備考

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

    パラメーター

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

    返却 any[]

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

    備考

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

    パラメーター

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

    返却 any[]

  • 指定したインデックスまたはコレクションの最後にタイプによってターゲット コレクションにディメンションを挿入します。

    this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);
    

    パラメーター

    • dimension: IPivotDimension

      追加されるディメンションです。

    • targetCollectionType: PivotDimensionType

      追加するターゲット コレクション タイプです。Row、Column、または Filter になります。

    • Optional index: number

      追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。

    返却 void

  • 指定したインデックスまたは最後に値を挿入します。

    this.grid.insertValueAt(value, 1);
    

    パラメーター

    • value: IPivotValue

      追加される値の定義。

    • Optional index: number

      追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。

    返却 void

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

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

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

    grid.markForCheck();
    

    返却 void

  • 指定したインデックスまたはコレクションの最後にあるタイプによって、現在のコレクションから指定したターゲット コレクションにディメンションを移動します。

    this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);
    

    パラメーター

    • dimension: IPivotDimension

      移動するディメンション。

    • targetCollectionType: PivotDimensionType

      移動先のターゲット コレクション タイプです。Row、Column、または Filter になります。

    • Optional index: number

      追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。

    返却 void

  • 現在指定されたインデックス位置または末尾から値を移動します。

    this.grid.moveValue(value, 1);
    

    パラメーター

    • value: IPivotValue

      移動する値です。

    • Optional index: number

      追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。

    返却 void

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

    備考

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

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

    パラメーター

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

          • args: any

          返却 void

    返却 void

  • 現在のコレクションからディメンションを削除します。

    備考

    これは、ディメンションを有効/無効にする toggleDimension とは異なります。 指定したディメンションをコレクションから完全に削除します。

    this.grid.removeDimension(dimension);
    

    パラメーター

    返却 void

  • 値をコレクションから削除します。

    備考

    これは、値を有効または無効にする toggleValue とは異なります。 これにより、指定した値がコレクションから完全に削除されます。

    this.grid.removeValue(dimension);
    

    パラメーター

    返却 void

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

    備考

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

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

    パラメーター

    • onlyFilterData: boolean = true

    返却 void

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

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

    パラメーター

    • rowIDs: any[]
    • Optional clearCurrentSelection: boolean

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

    返却 void

  • ディメンションの有効状態をオンまたはオフにトグルします。

    備考

    ディメンションは現在のコレクションに残ります。これは有効状態を変更するだけです。

    this.grid.toggleDimension(dimension);
    

    パラメーター

    返却 void

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

    備考

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

    this.grid.toggleRow(rowID);
    

    パラメーター

    • rowID: any

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

    返却 void