Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxPivotDataSelectorComponent

Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI

Igx Module

IgxPivotGridModule

Igx Group

Grids & Lists

Igx Keywords

data selector, pivot, grid

Igx Theme

pivot-data-selector-theme

Remarks

The Ignite UI Data Selector has a searchable list with the grid data columns, there are also four expandable areas underneath for filters, rows, columns, and values is used for grouping and aggregating simple flat data into a pivot table.

Example

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

Constructors

Properties

Accessors

Constructors

constructor

Properties

animationSettings

animationSettings: {
    closeAnimation: AnimationAnimateRefMetadata;
    openAnimation: AnimationAnimateRefMetadata;
} = ...

Type declaration

  • closeAnimation: AnimationAnimateRefMetadata
  • openAnimation: AnimationAnimateRefMetadata

columnsExpanded

columnsExpanded: boolean = true

Gets/sets whether the columns panel is expanded Get

 const columnsPanelState: boolean = this.dataSelector.columnsExpanded;

Set

<igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>

Two-way data binding:

<igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>

filtersExpanded

filtersExpanded: boolean = true

Gets/sets whether the filters panel is expanded Get

 const filtersPanelState: boolean = this.dataSelector.filtersExpanded;

Set

<igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>

Two-way data binding:

<igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>

rowsExpanded

rowsExpanded: boolean = true

Gets/sets whether the rows panel is expanded Get

 const rowsPanelState: boolean = this.dataSelector.rowsExpanded;

Set

<igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>

Two-way data binding:

<igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>

valuesExpanded

valuesExpanded: boolean = true

Gets/sets whether the values panel is expanded Get

 const valuesPanelState: boolean = this.dataSelector.valuesExpanded;

Set

<igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>

Two-way data binding:

<igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>

Accessors

grid