New to Kendo UI for Vue? Start a free 30-day trial

PivotGrid

Directive

kendo-pivotgrid

Props

data-source Object

The data source of the PivotGrid which is used to display values (dataSource in Kendo UI for jQuery).

You can set data-source to:

  • A JavaScript object which represents any valid data source configuration.
  • A JavaScript array.
  • An existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or an array, the PivotGrid will initialize a new kendo.data.DataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.DataSource instance, the PivotGrid will use that instance and will not initialize a new one.

auto-bind Boolean

If auto-bind is set to false, the PivotGrid will not bind to the data source during initialization (autoBind in Kendo UI for jQuery). In this case, data binding will occur when the change event of the data source is fired. By default, the PivotGrid will bind to the data source which is specified in the configuration.

reorderable Boolean

If columnReorder is set to false, the user will not be able to add, close, or reorder the current fields for the columns, rows, or measures (reorderable in Kendo UI for jQuery).

excel Object

Configures the Excel export settings of the PivotGrid (excel in Kendo UI for jQuery). The supported composite props are available in ExcelProps.

pdf Object

Configures the PDF export settings of the PivotGrid (pdf in Kendo UI for jQuery). The supported composite props are available in PdfProps.

filterable Boolean

If filterable is set to true, the user will be able to filter the PivotGrid by using the field menu (filterable in Kendo UI for jQuery).

sortable Boolean | Object

If sortable is set to true, the user will be able to sort the PivotGrid by clicking the Dimension fields (sortable in Kendo UI for jQuery). By default, sorting is disabled. Can be set to a JavaScript object which represents the sorting configuration. The supported composite props are available in SortableProps.

column-width Number

The width (in pixels) of the table columns (columnWidth in Kendo UI for jQuery).

height Number | String

The height of the PivotGrid (height in Kendo UI for jQuery). Numeric values are treated as pixels.

column-header-template String | Function

The template for rendering the content of the column header cell (columnHeaderTemplate in Kendo UI for jQuery). By default, column-header-template renders the caption of the tuple member.

The template supports the following fields:

  • member—The member of the corresponding column header cell.
  • tuple—The tuple of the corresponding column header cell.

data-cell-template String | Function

The template for rendering the content of the data cell (dataCellTemplate in Kendo UI for jQuery). By default, the template renders the formatted value (fmtValue) of the data item.

The template supports the following fields:

  • columnTuple—The tuple of the corresponding column header cell.
  • rowTuple—The tuple of the corresponding row header cell.
  • measure—The value of the data cell measure.
  • dataItem—The data item itself.

kpi-status-template String | Function

The template for rendering the content of the KPI Status value (kpiStatusTemplate in Kendo UI for jQuery).

The default status icons are:

  • open
  • hold
  • denied

The template supports the following fields:

  • columnTuple—The tuple of the corresponding column header cell.
  • rowTuple—The tuple of the corresponding row header cell.
  • measure—The value of the data cell measure.
  • dataItem—The data item itself.

kpi-trend-template String | Function

The template for rendering the content of the KPI Trend value (kpiTrendTemplate in Kendo UI for jQuery).

The default status icons are:

  • increase
  • decrease
  • equal

The template supports the following fields:

  • columnTuple—The tuple of the corresponding column header cell.
  • rowTuple—The tuple of the corresponding row header cell.
  • measure—The value of the data cell measure.
  • dataItem—The data item itself.

row-header-template String | Function

The template for rendering the content of the row header cell (rowHeaderTemplate in Kendo UI for jQuery). By default, row-header-template renders the caption of the tuple member.

The template supports the following fields:

  • member—The member of the corresponding row header cell.
  • tuple—The tuple of the corresponding row header cell.

messages Object

The text messages that are displayed in the Fields sections (messages in Kendo UI for jQuery). The supported composite props are available in MessagesProps.

Events

databinding: Function

Fires before the PivotGrid binds to its data source (dataBinding in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the PivotGrid instance.

databound: Function

Fires after the PivotGrid is bound to the data from its data source (dataBound in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the PivotGrid instance.

expandmember: Function

Fires before the column or row field is expanded (expandMember in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the PivotGrid instance.

collapsemember: Function

Fires before the column or row field is collapsed (collapseMember in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the PivotGrid instance.

excelexport: Function

Fires when the saveAsExcel method is called (excelExport in Kendo UI for jQuery).

pdfexport: Function

Fires when the user clicks the Export to PDF toolbar button (pdfExport in Kendo UI for jQuery).

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI PivotGrid instance.