Gets or sets pivot source adapter used to supply data to the pivot grid.

Code example:

var column1Values =
[
   'a', 'b', 'c', 'd'
];
var column2Values =
[
   'e', 'f', 'g', 'h'
];
var column3Values =
[
   'i', 'j', 'k', 'l'
];
var column4Values =
[
   '2.25', '1.5', '3.0', '3.3', '4.5'
];
var myData = [];
for (var i = 0; i < 500; i++) {
   var row = {};
   row.column1 = column1Values[Math.floor(Math.random() * column1Values.length)];
   row.column2 = column2Values[Math.floor(Math.random() * column2Values.length)];
   row.column3 = column3Values[Math.floor(Math.random() * column3Values.length)];
   row.column4 = parseFloat(column4Values[Math.floor(Math.random() * column4Values.length)]);
   myData.push(row);
}
var source = {
   localdata: myData,
   datatype: 'array',
   datafields:
   [
      { name: 'column1', type: 'string' },
      { name: 'column2', type: 'string' },
      { name: 'column3', type: 'string' },
      { name: 'column4', type: 'number' }
   ]
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivotDataSource from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
   dataAdapter,
   {
      pivotValuesOnRows: false,
      rows: [{ dataField: 'column1' }, { dataField: 'column2'}],
      columns: [{ dataField: 'column3'}],
      values: [
         { dataField: 'column4', text: 'Sum of column4', 'function': 'sum'},
         { dataField: 'column4', text: 'Count of column4', 'function': 'count'}
      ]
   });
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid({
   source: pivotDataSource
});

Gets or sets the localization object used to localize the text elements of the pivot grid.

Code example:

var customLocalizationObj = {
 sortascendingstring: 'Sortiere aufsteigend',
 sortdescendingstring: 'Sortiere absteigend',
 sortremovestring: 'Entferne Sortierung'
};
$('#myPivotGrid').jqxPivotGrid({localization: customLocalizationObj});

Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.

Code example:

$('#myPivotGrid').jqxPivotGrid({scrollBarsEnabled: false});

Gets or sets whether selection in the pivot grid is enabled or disabled.

Code example:

$('#myPivotGrid').jqxPivotGrid({multipleSelectionEnabled: false});

Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.

Code example:

$('#myPivotGrid').jqxPivotGrid({multipleSelectionEnabled: false});

Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.

Code example:

$('#myPivotGrid').jqxPivotGrid({treeStyleRows: false});

Gets or sets if the size of pivot grid adjusts automatically to display the entire content.

Code example:

$('#myPivotGrid').jqxPivotGrid({treeStyleRows: true});

Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.

Code example:

$('#myPivotGrid').jqxPivotGrid(
{
   source: pivotDataSource,
   itemsRenderer: function (pivotItem) {
      var backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
      return "<div style='background: " 
         +  backgroundColor
         + "; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;'>"
         + pivotItem.text
         + "</div>";
   },
   cellsRenderer: function (pivotCell) {
      var backgroundColor = 'rgba(253, 254, 207, 255)';
      var cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
      return "<div style='background: " + backgroundColor + "; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;'>" + cellText + "</div>";
   }
});

Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.

Code example:

$('#myPivotGrid').jqxPivotGrid(
{
   source: pivotDataSource,
   itemsRenderer: function (pivotItem) {
      var backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
      return "<div style='background: " 
         +  backgroundColor
         + "; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;'>"
         + pivotItem.text
         + "</div>";
   },
   cellsRenderer: function (pivotCell) {
      var backgroundColor = 'rgba(253, 254, 207, 255)';
      var cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
      return "<div style='background: " + backgroundColor + "; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;'>" + cellText + "</div>";
   }
});

This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemexpanding event:

$('#myPivotGrid').on('pivotitemexpanding', function (event) {
     alert('Pivot item expanding: ' + event.args.pivotItem.text);
});

This event is triggered after a pivot item is expanded.

Code example:

Handling the pivotitemexpanded event:

$('#myPivotGrid').on('pivotitemexpanded', function (event) {
     alert('Pivot item expanded: ' + event.args.pivotItem.text);
});

This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemcollapsing event:

$('#myPivotGrid').on('pivotitemcollapsing', function (event) {
     alert('Pivot item collapsing: ' + event.args.pivotItem.text);
});

This event is triggered after a pivot item is collapsed.

Code example:

Handling the pivotitemcollapsed event:

$('#myPivotGrid').on('pivotitemcollapsed', function (event) {
     alert('Pivot item collapsed: ' + event.args.pivotItem.text);
});

This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.

Code example:

Handling the sortchanging event:

$('#myPivotGrid').on('sortchanging', function (event) {
     alert('Sort changing triggered. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder );
});

This event is triggered after the sorting order has changed.

Code example:

Handling the sortchanged event:

$('#myPivotGrid').on('sortchanged', function (event) {
     alert('Sort changed. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder );
});

This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.

Code example:

Handling the sortremoving event:

$('#myPivotGrid').on('sortremoving', function (event) {
     alert('Sort removing triggered. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder );
});

This event is triggered after the sorting has been sortremoved.

Code example:

Handling the sortremoved event:

$('#myPivotGrid').on('sortremoved', function (event) {
     alert('Sort removed. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder );
});

This event is triggered after the selection of a pivot item has changed.

Code example:

Handling the pivotitemselectionchanged event:

$('#myPivotGrid').on('pivotitemselectionchanged', function (event) {
     alert('Pivot item: ' + event.args.pivotItem.text + ' , selected:' + event.args.selected );
});

This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotcellmousedown event:

$('#myPivotGrid').on('pivotcellmousedown', function (event) {
     alert('cell mousedown, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotcellmouseup event:

$('#myPivotGrid').on('pivotcellmouseup', function (event) {
     alert('cell mouseup, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotcellclick event:

$('#myPivotGrid').on('pivotcellclick', function (event) {
     alert('cell click, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on double click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotcelldblclick event:

$('#myPivotGrid').on('pivotcelldblclick', function (event) {
     alert('cell double click, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemmousedown event:

$('#myPivotGrid').on('pivotitemmousedown', function (event) {
     alert('Pivot item mousedown: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemmouseup event:

$('#myPivotGrid').on('pivotitemmouseup', function (event) {
     alert('Pivot item mouseup: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemclick event:

$('#myPivotGrid').on('pivotitemclick', function (event) {
     alert('Pivot item click: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton );
});

This event is triggered on double click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code example:

Handling the pivotitemdblclick event:

$('#myPivotGrid').on('pivotitemdblclick', function (event) {
     alert('Pivot item double click: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton );
});

Returns the instance of the pivot grid component

Code example:

var myPivotGridInstance = $('#myPivotGrid').jqxPivotGrid('getInstance');

Refreshes the content of the pivot grid component

Code example:

$('#myPivotGrid').jqxPivotGrid('refresh');

Destroys the pivot grid component instance

Code example:

$('#myPivotGrid').jqxPivotGrid('destroy');

Return the pivot rows of the pivot grid

Code example:

var myPivotGridRows = $('#myPivotGrid').jqxPivotGrid('getPivotRows');
alert('The pivot grid has ' + myPivotGridRows.items.length + ' rows.');

Return the pivot columns of the pivot grid

Code example:

var myPivotGridColumns = $('#myPivotGrid').jqxPivotGrid('getPivotColumns');
alert('The pivot grid has ' + myPivotGridColumns.items.length + ' columns.');

Return the pivot cells of the pivot grid

Code example:

var myPivotGridCells = $('#myPivotGrid').jqxPivotGrid('getPivotCells');

Gets or sets the type of the pivot designer - pivotGrid or pivotChart.

Gets or sets the instance of the widget component controlled by the pivot designer component.

The row of the pivot cell.

The column of the pivot cell.

Optional text that appears at the start of the formatted string

Optional text that appears at the end of the formatted string

Separator for the decimal point in the cell's value

Separator for the thousands in the cell's value

Number of decimal places for the cell's value

Determines if negative numbers will be displayed in brackets or with a negative sign.

Returns the pivot cell at the corresponding position if exists

Clears all pivot cells

Sets the value of a pivot cell

Gets the value of a pivot cell

Drills through a pivot cells and returns the respective source data records

Selects a pivot cell

Unselects a pivot cell

Clears the selection of all selected pivot cells

Checks if a pivot cell is selected

Returns the number of selected cells

Returns an array of all selected cells

Returns the cell left, right, above or below a specific pivot cell

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

The dataField in the data source used for this pivot field.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

The dataField in the data source used for this pivot filter field.

The text which will appear in the pivot designer when using this field.

Implementation of the filtering function used to skip/filter records from the data source. The function should return true if the record should be filtered, otherwise false.

Returns true if the pivot item is expanded.

Returns true if the pivot item is hidden.

Returns true if the pivot item is hidden.

Returns a reference to the parent item.

Returns a reference to the parent rows or columns hierarchy.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Gets the width of the pivot item

Gets the displayed width of the pivot item

Auto resizes the pivot item

Gets the height of the pivot item

Gets the displayed height of the pivot item

Sets the height of the pivot item

Expands the pivot item so all sub-items will be visible

Collapses the pivot item so all sub-items will be invisible

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

Determines whether the pivot values will be displayed on rows or columns.

A list of data fields which will be used to build the pivot rows.

A list of data fields which will be used to build the pivot columns.

A list of data fields which will be used to build the pivot values.

A list of filters to apply on the source records while building the pivot table.

The dataField in the data source used for this pivot field.

The data aggregation function to use when calculating the cells values. You can either use the name of one of the built in functions like 'sum', 'count', 'min', 'max', 'product', 'average' or provide the implementation of your own function.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

Name of style to use when displaying the cells of this pivot value field.

Name of style to use when displaying this cells this pivot value field when the cells are selected.

X coordinate

Y coordinate