We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
load: function() {
let pivotGridObj = (<any>this.$refs.pivotview).ej2Instances;
for (var i = 0; i < pivotGridObj.dataSource.data.length; i++) {
//You can access the raw data source and change it from number to string here.
pivotGridObj.dataSource.data[i]['Sold'] = pivotGridObj.dataSource.data[i]['Sold'].toString();
}
},
|
|
<template>
<div id="app">
<ejs-pivotview :dataSource="dataSource" :height= "height" :gridSettings= "gridSettings"> </ejs-pivotview>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
Vue.use(PivotViewPlugin);
export default {
data () {
return {
dataSource: {
data: [
{
"balance": 2430.87,
"quantity": 11,
"name": "Skinner Ward",
"gender": "male",
"company": "GROK",
"state": "New Jercy"
},
{
"balance": 3192.7,
"quantity": 15,
"name": "Gwen Dixon",
"gender": "female",
"company": "ICOLOGY",
"state": "Vetaikan"
},
{
"balance": 1663.84,
"quantity": 14,
"name": "Deena Gillespie",
"gender": "female",
"company": "OVERPLEX",
"state": "New Jercy"
}
],
rows: [{ name: 'company' }],
columns: [{ name: 'name' }],
values: [{ name: 'balance' }, { name: 'quantity' }],
filters: [{ name: 'gender' }]
},
height: 300,
showFieldList: true,
gridSettings: {
queryCellInfo: this.queryCellInfo.bind(this)
}
}
},
methods: {
queryCellInfo: function(args) {
if (args.data[0].valueSort && args.cell.classList.contains('e-rowsheader') && !args.cell.classList.contains('e-gtot')) {
args.data[0].formattedText = args.data[0].valueSort.axis + " : " + args.data[0].formattedText;
args.cell.querySelector('.e-cellvalue').innerText = args.data[0].formattedText;
}
}
}
}
</script>
|
