React UI Components Documentation
Properties
| Name | Type | Default |
|---|---|---|
| source | Object | null |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| localization | Object | null |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} localization={localization}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| scrollBarsEnabled | Boolean | true |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} scrollBarsEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| selectionEnabled | Boolean | true |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} multipleSelectionEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| multipleSelectionEnabled | Boolean | true |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} multipleSelectionEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| treeStyleRows | Boolean | true |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} treeStyleRows={false}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| autoResize | Boolean | false |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} treeStyleRows={true}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| itemsRenderer | function | undefined |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} itemsRenderer={itemsRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| cellsRenderer | function | undefined |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource} cellsRenderer={cellsRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
Events |
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemexpanding', (event) => {
// Do Something...
});
}
|
||
| pivotitemexpanded | Event | |
|
This event is triggered after a pivot item is expanded. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemexpanded', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemcollapsing', (event) => {
// Do Something...
});
}
|
||
| pivotitemcollapsed | Event | |
|
This event is triggered after a pivot item is collapsed. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemcollapsed', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('sortchanging', (event) => {
// Do Something...
});
}
|
||
| sortchanged | Event | |
|
This event is triggered after the sorting order has changed. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('sortchanged', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('sortremoving', (event) => {
// Do Something...
});
}
|
||
| sortremoved | Event | |
|
This event is triggered after the sorting has been sortremoved. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('sortremoved', (event) => {
// Do Something...
});
}
|
||
| pivotitemselectionchanged | Event | |
|
This event is triggered after the selection of a pivot item has changed. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemselectionchanged', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotcellmousedown', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotcellmouseup', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotcellclick', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotcelldblclick', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemmousedown', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemmouseup', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemclick', (event) => {
// Do Something...
});
}
|
||
| 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
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.on('pivotitemdblclick', (event) => {
// Do Something...
});
}
|
||
Methods |
||
| Name | Return Type | |
| getInstance | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myPivotGrid.getInstance();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| refresh | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.refresh();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| destroy | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
this.refs.myPivotGrid.destroy();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| getPivotRows | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myPivotGrid.getPivotRows();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| getPivotColumns | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myPivotGrid.getPivotColumns();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| getPivotCells | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myPivotGrid.getPivotCells();
}
render() {
// Prepare Sample Data
const data = new Array();
const countries =
[
'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
];
const dataPoints =
[
'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
];
for (let i = 0; i < countries.length * 2; i++) {
let row = {};
const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row['country'] = countries[i % countries.length];
row['value'] = value;
data[i] = row;
}
// Create a Data Source and DataAdapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// Create a Pivot Data Source from the DataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values:
[
{ dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
}
);
return (
<JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
source={pivotDataSource}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
