| Name | Type | Default |
|---|
|
source
|
any
|
null
|
Gets or sets pivot source adapter used to supply data to the pivot grid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
localization
|
any
|
null
|
Gets or sets the localization object used to localize the text elements of the pivot grid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} localization={this.state.localization} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
scrollBarsEnabled
|
boolean
|
true
|
Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} scrollBarsEnabled={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
selectionEnabled
|
boolean
|
true
|
Gets or sets whether selection in the pivot grid is enabled or disabled.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} selectionEnabled={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
multipleSelectionEnabled
|
boolean
|
true
|
Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} multipleSelectionEnabled={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
treeStyleRows
|
boolean
|
true
|
Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} treeStyleRows={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
autoResize
|
boolean
|
false
|
Gets or sets if the size of pivot grid adjusts automatically to display the entire content.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
itemsRenderer
|
(pivotItem: PivotGridItemsRenderer['pivotItem']) => string
|
null
|
Interface PivotGridItemsRenderer {
pivotItem?: any;
}
Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} itemsRenderer={this.state.itemsRenderer} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
cellsRenderer
|
(pivotCell: PivotGridCellsRenderer['pivotCell']) => string
|
null
|
Interface PivotGridCellsRenderer {
pivotCell?: any;
}
Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} cellsRenderer={this.state.cellsRenderer} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
|
|
pivotitemexpanding
|
Event
|
|
This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotitemexpanding event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanding={this.onPivotitemexpanding} source={this.state.source} autoResize={true} /> ); } private onPivotitemexpanding(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemexpanded
|
Event
|
|
This event is triggered after a pivot item is expanded.
Code examples
Bind to the pivotitemexpanded event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanded={this.onPivotitemexpanded} source={this.state.source} autoResize={true} /> ); } private onPivotitemexpanded(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemcollapsing
|
Event
|
|
This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotitemcollapsing event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsing={this.onPivotitemcollapsing} source={this.state.source} autoResize={true} /> ); } private onPivotitemcollapsing(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemcollapsed
|
Event
|
|
This event is triggered after a pivot item is collapsed.
Code examples
Bind to the pivotitemcollapsed event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsed={this.onPivotitemcollapsed} source={this.state.source} autoResize={true} /> ); } private onPivotitemcollapsed(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
sortchanging
|
Event
|
|
This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the sortchanging event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onSortchanging={this.onSortchanging} source={this.state.source} autoResize={true} /> ); } private onSortchanging(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
sortchanged
|
Event
|
|
This event is triggered after the sorting order has changed.
Code examples
Bind to the sortchanged event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onSortchanged={this.onSortchanged} source={this.state.source} autoResize={true} /> ); } private onSortchanged(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
sortremoving
|
Event
|
|
This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the sortremoving event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onSortremoving={this.onSortremoving} source={this.state.source} autoResize={true} /> ); } private onSortremoving(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
sortremoved
|
Event
|
|
This event is triggered after the sorting has been removed.
Code examples
Bind to the sortremoved event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onSortremoved={this.onSortremoved} source={this.state.source} autoResize={true} /> ); } private onSortremoved(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemselectionchanged
|
Event
|
|
This event is triggered after the selection of a pivot item has changed.
Code examples
Bind to the pivotitemselectionchanged event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemselectionchanged={this.onPivotitemselectionchanged} source={this.state.source} autoResize={true} /> ); } private onPivotitemselectionchanged(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotcellmousedown
|
Event
|
|
This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotcellmousedown event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotcellmousedown={this.onPivotcellmousedown} source={this.state.source} autoResize={true} /> ); } private onPivotcellmousedown(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotcellmouseup
|
Event
|
|
This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotcellmouseup event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotcellmouseup={this.onPivotcellmouseup} source={this.state.source} autoResize={true} /> ); } private onPivotcellmouseup(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotcellclick
|
Event
|
|
This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotcellclick event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotcellclick={this.onPivotcellclick} source={this.state.source} autoResize={true} /> ); } private onPivotcellclick(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotcelldblclick
|
Event
|
|
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 examples
Bind to the pivotcelldblclick event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotcelldblclick={this.onPivotcelldblclick} source={this.state.source} autoResize={true} /> ); } private onPivotcelldblclick(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemmousedown
|
Event
|
|
This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotitemmousedown event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemmousedown={this.onPivotitemmousedown} source={this.state.source} autoResize={true} /> ); } private onPivotitemmousedown(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemmouseup
|
Event
|
|
This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotitemmouseup event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemmouseup={this.onPivotitemmouseup} source={this.state.source} autoResize={true} /> ); } private onPivotitemmouseup(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemclick
|
Event
|
|
This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the pivotitemclick event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemclick={this.onPivotitemclick} source={this.state.source} autoResize={true} /> ); } private onPivotitemclick(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
pivotitemdblclick
|
Event
|
|
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 examples
Bind to the pivotitemdblclick event of jqxPivotGrid.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} onPivotitemdblclick={this.onPivotitemdblclick} source={this.state.source} autoResize={true} /> ); } private onPivotitemdblclick(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
getInstance
|
|
|
Returns the instance of the pivot grid component
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public componentDidMount(): void { this.myPivotGrid.current!.getInstance(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
refresh
|
|
|
Refreshes the content of the pivot grid component
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public componentDidMount(): void { this.myPivotGrid.current!.refresh(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
getPivotRows
|
|
|
Return the pivot rows of the pivot grid
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public componentDidMount(): void { this.myPivotGrid.current!.getPivotRows(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
getPivotColumns
|
|
|
Return the pivot columns of the pivot grid
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public componentDidMount(): void { this.myPivotGrid.current!.getPivotColumns(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
getPivotCells
|
|
|
Return the pivot cells of the pivot grid
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid'; class App extends React.PureComponent<{}, IPivotGridProps> { private myPivotGrid = React.createRef<JqxPivotGrid>(); constructor(props: {}) { super(props); const createPivotDataSource = function () { // prepare sample data const data = new Array(); const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ]; const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ]; const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ]; const priceValues = [ '2.25', '1.5', '3.0', '3.3', '4.5']; for ( let i = 0; i < 50; i++) { const row = {}; const productindex = Math.floor(Math.random() * productNames.length); const price = parseFloat(priceValues[productindex]); const quantity = 1 + Math.round(Math.random() * 10); row[ 'firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)]; row[ 'lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)]; row[ 'productname'] = productNames[productindex]; row[ 'price'] = price; row[ 'quantity'] = quantity; row[ 'total'] = price * quantity; data[i] = row; } // create a data source and data adapter const source = { localdata: data, datatype: 'array', datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; const dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter const pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean let mean = 0; for ( let i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum let ssum = 0; for ( let i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance const variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname' }], filters: [ { dataField: 'productname', filterFunction: function (value) { if (value == 'Black Tea' || value == 'Green Tea') return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } } ] } ); return pivotDataSource; } const source = createPivotDataSource(); } public componentDidMount(): void { this.myPivotGrid.current!.getPivotCells(); } public render() { return ( <JqxPivotGrid ref={this.myPivotGrid} source={this.state.source} autoResize={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
