Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
147940 | Sep 28,2019 12:07 PM UTC | Oct 9,2019 02:48 PM UTC | React - EJ 2 | 7 |
![]() |
Tags: PivotGrid |
let dataSourceSettings = {
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
valueSortSettings: { headerDelimiter: ' - ' },
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
dataSource: getPivotData(),
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: true,
filters: [],
showHeaderWhenEmpty: false
};
function getPivotData() {
let pivotData = [
{ 'Sold': 31, 'Amount': 52824, 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }
];
return pivotData;
}
export class Default extends SampleBase {
onload (args) {
args.dataSourceSettings.dataSource[0]["Country"] = undefined;
args.dataSourceSettings.dataSource[0]["Products"] = undefined;
}
render() {
return (<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section' style={{ overflow: 'auto' }}>
<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings} width={'100%'} height={'300'} gridSettings={{ columnWidth: 140 }} load={this.onload.bind(this)} >
</PivotViewComponent>
</div>
</div>);
}
}
render(<Default />, document.getElementById('sample'));
|
var order=[{Id:1,Title:"order1",supply:[{id:1,orderId:1,supplyTitle:"supply1"},{id:2,orderId:1,supplyTitle:"supply2"}],stuff:[{id:1,orderId:1,stuffTitle:"stuff1"},{id:2,orderId:1,stuffTitle:"stuff2"}]},{Id:2,Title:"order2",supply:[{id:3,orderId:2,supplyTitle:"supply3"},{id:4,orderId:2,supplyTitle:"supply4"}],stuff:[{id:3,orderId:2,stuffTitle:"stuff3"},{id:4,orderId:2,stuffTitle:"stuff4"}]},{Id:3,Title:"order3",supply:[{id:5,orderId:3,supplyTitle:"supply5"},{id:6,orderId:3,supplyTitle:"supply6"}],stuff:[{id:5,orderId:3,stuffTitle:"stuff5"},{id:6,orderId:3,stuffTitle:"stuff6"}]}] |
var pivotData = [
{
Id: 1,
Title: "order1",
id: 1,
orderId: 1,
supplyTitle: "supply1",
id: 1,
orderId: 1,
stuffTitle: "stuff1"
},
{
Id: 1,
Title: "order1",
id: 2,
orderId: 1,
supplyTitle: "supply2",
id: 2,
orderId: 1,
stuffTitle: "stuff2"
},
{
Id: 2,
Title: "order2",
id: 3,
orderId: 2,
supplyTitle: "supply3",
id: 3,
orderId: 2,
stuffTitle: "stuff3"
},
{
Id: 2,
Title: "order2",
id: 4,
orderId: 2,
supplyTitle: "supply4",
id: 4,
orderId: 2,
stuffTitle: "stuff4"
},
{
Id: 3,
Title: "order3",
id: 5,
orderId: 3,
supplyTitle: "supply5",
id: 5,
orderId: 3,
stuffTitle: "stuff5"
},
{
Id: 3,
Title: "order3",
id: 6,
orderId: 3,
supplyTitle: "supply6",
id: 6,
orderId: 3,
stuffTitle: "stuff6"
}
]
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.