jqwidgets-framework

<!DOCTYPE html> <html lang="en-US"> <head> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <link rel="stylesheet" href="../../../../styles/jqx.apireference.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.light.css" type="text/css" /> <script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#tabs").jqxTabs({ theme: "light" }); $(".documentation-option-type-click").click(function (event) { $(event.target).parents("tr").next().find(".property-content").toggle(); }); }); </script> <title>jqxPivotGrid API Reference</title> </head> <body> <div id="tabs"> <ul> <li style="margin-left:30px;">Pivot Grid</li> <li>Pivot Designer</li> <li>Pivot Cell</li> <li>Pivot Cell Formatting</li> <li>Pivot Cells</li> <li>Pivot Columns</li> <li>Pivot Field</li> <li>Pivot Filter Field</li> <li>Pivot Item</li> <li>Pivot Rows</li> <li>Pivot Settings</li> <li>Pivot Value Field</li> <li>Pivot Point</li> </ul> <div id="properties"> <table class="documentation-table"> <tbody> <tr> <td colspan="3" style="width: 100%"> <h2 class="documentation-top-header"> Properties </h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan0">source</span> </td> <td> <span>Object</span> </td> <td> null </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets pivot source adapter used to supply data to the pivot grid.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>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 }); </CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan1">localization</span> </td> <td> <span>Object</span> </td> <td> null </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets the localization object used to localize the text elements of the pivot grid.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>var customLocalizationObj = { sortascendingstring: 'Sortiere aufsteigend', sortdescendingstring: 'Sortiere absteigend', sortremovestring: 'Entferne Sortierung' }; $('#myPivotGrid').jqxPivotGrid({localization: customLocalizationObj});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan2">scrollBarsEnabled</span> </td> <td> <span>Boolean</span> </td> <td> true </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid({scrollBarsEnabled: false});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan3">selectionEnabled</span> </td> <td> <span>Boolean</span> </td> <td> true </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets whether selection in the pivot grid is enabled or disabled.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid({multipleSelectionEnabled: false});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan4">multipleSelectionEnabled</span> </td> <td> <span>Boolean</span> </td> <td> true </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid({multipleSelectionEnabled: false});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan5">treeStyleRows</span> </td> <td> <span>Boolean</span> </td> <td> true </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid({treeStyleRows: false});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan6">autoResize</span> </td> <td> <span>Boolean</span> </td> <td> false </td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Gets or sets if the size of pivot grid adjusts automatically to display the entire content.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid({treeStyleRows: true});</PRE></CODE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan7">itemsRenderer</span> </td> <td> <span>function</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#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>"; } }); </CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan8">cellsRenderer</span> </td> <td> <span>function</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.</p> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#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>"; } }); </CODE></PRE> </p> </div> </td> </tr> <tr> <td colspan="3" style="width: 100%"> <h2 class="documentation-top-header"> Events </h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan9">pivotitemexpanding</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemexpanding event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemexpanding', function (event) { alert('Pivot item expanding: ' + event.args.pivotItem.text); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan10">pivotitemexpanded</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered after a pivot item is expanded.</p> <h4>Code example:</h4> <p> Handling the pivotitemexpanded event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemexpanded', function (event) { alert('Pivot item expanded: ' + event.args.pivotItem.text); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan11">pivotitemcollapsing</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemcollapsing event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemcollapsing', function (event) { alert('Pivot item collapsing: ' + event.args.pivotItem.text); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan12">pivotitemcollapsed</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered after a pivot item is collapsed.</p> <h4>Code example:</h4> <p> Handling the pivotitemcollapsed event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemcollapsed', function (event) { alert('Pivot item collapsed: ' + event.args.pivotItem.text); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan13">sortchanging</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the sortchanging event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('sortchanging', function (event) { alert('Sort changing triggered. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan14">sortchanged</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered after the sorting order has changed.</p> <h4>Code example:</h4> <p> Handling the sortchanged event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('sortchanged', function (event) { alert('Sort changed. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan15">sortremoving</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the sortremoving event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('sortremoving', function (event) { alert('Sort removing triggered. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan16">sortremoved</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered after the sorting has been sortremoved.</p> <h4>Code example:</h4> <p> Handling the sortremoved event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('sortremoved', function (event) { alert('Sort removed. Pivot item: ' + event.args.pivotItem.text + ' , Sort order:' + event.args.sortOrder ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan17">pivotitemselectionchanged</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered after the selection of a pivot item has changed.</p> <h4>Code example:</h4> <p> Handling the pivotitemselectionchanged event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemselectionchanged', function (event) { alert('Pivot item: ' + event.args.pivotItem.text + ' , selected:' + event.args.selected ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan18">pivotcellmousedown</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotcellmousedown event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotcellmousedown', function (event) { alert('cell mousedown, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan19">pivotcellmouseup</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotcellmouseup event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotcellmouseup', function (event) { alert('cell mouseup, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan20">pivotcellclick</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotcellclick event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotcellclick', function (event) { alert('cell click, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan21">pivotcelldblclick</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on double click over a pivot grid cell. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotcelldblclick event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotcelldblclick', function (event) { alert('cell double click, row: ' + event.args.pivotRow.text + ' , column:' + event.args.pivotColumn.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan22">pivotitemmousedown</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemmousedown event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemmousedown', function (event) { alert('Pivot item mousedown: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan23">pivotitemmouseup</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemmouseup event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemmouseup', function (event) { alert('Pivot item mouseup: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan24">pivotitemclick</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemclick event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemclick', function (event) { alert('Pivot item click: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan25">pivotitemdblclick</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>This event is triggered on double click over a pivot grid item. You may use the event's cancel flag to stop further processing.</p> <h4>Code example:</h4> <p> Handling the pivotitemdblclick event: </p> <p> <PRE><CODE>$('#myPivotGrid').on('pivotitemdblclick', function (event) { alert('Pivot item double click: ' + event.args.pivotItem.text + ' , mouse button:' + event.args.mousebutton ); });</CODE></PRE> </p> </div> </td> </tr> <tr> <td colspan="3" style="width: 100%"> <h2 class="documentation-top-header"> Methods </h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan26">getInstance</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Returns the instance of the pivot grid component</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>Object</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>var myPivotGridInstance = $('#myPivotGrid').jqxPivotGrid('getInstance');</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan27">refresh</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Refreshes the content of the pivot grid component</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid('refresh');</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan28">destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Destroys the pivot grid component instance</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>$('#myPivotGrid').jqxPivotGrid('destroy');</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan29">getPivotRows</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Return the pivot rows of the pivot grid</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>Object</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>var myPivotGridRows = $('#myPivotGrid').jqxPivotGrid('getPivotRows'); alert('The pivot grid has ' + myPivotGridRows.items.length + ' rows.');</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan30">getPivotColumns</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Return the pivot columns of the pivot grid</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>Object</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>var myPivotGridColumns = $('#myPivotGrid').jqxPivotGrid('getPivotColumns'); alert('The pivot grid has ' + myPivotGridColumns.items.length + ' columns.');</CODE></PRE> </p> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id="propertiesSpan31">getPivotCells</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan="3" style="width: 100%"> <div class="documentation-option-description property-content" style="display: none;"> <p>Return the pivot cells of the pivot grid</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <td colspan="3"><strong>Parameters</strong></td> </tr> <tr> <td colspan="3">None</td> </tr> </tbody> </table> <br /><strong>Return Value</strong><br /> <em>Object</em> </div> <h4>Code example:</h4> <p> </p> <p> <PRE><CODE>var myPivotGridCells = $('#myPivotGrid').jqxPivotGrid('getPivotCells');</CODE></PRE> </p> </div> </td> </tr> </tbody> </table> </div> <div id="properties"> <table class="documentation-table"> <tbody> <tr> <td colspan="3" style="width: 100%"> <h2 class="documentation-top-header"> Properties </h2> </td> </tr> <tr> <td class="documentation-option-type-click">