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. Image for the cookie policy date

Column names

Because the column names come from the datasource in numbers, is it possible to convert them to string?

3 Replies

AA Arulraj A Syncfusion Team February 18, 2019 10:11 AM UTC

Hi Kaloyon, 

Thanks for using Syncfusion product. 

We are analyzed your query and we suspect that you need to change the raw data source. You can change the raw data source in the load event. 
Code Snippet: 
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(); 

If this is different from your requirement, then please let us know the more details so that we can work towards fulfilling your requirement. 

Arulraj A 

GP Georgi Panayotov February 21, 2019 01:02 PM UTC

Do you plan any feature in Pivot Table like using Lookup data for values at least for row or column names or having ability to set a template for displaying column/row names.
When da data from the server contains values from Enum (doesn't matter if it is in string or int) it will be easyer to use the name in current language of each value from a dictionary or list.
Then you don't need to send to the server which language is currently in use and to have in 2 places the localization in all languages the names from specific enum type.

Simmilar approach we are using in the Grid (the templates in cells and headers).

Of course there is always plan B and C - the data to come from the server translated or the data array to be updated on the client.

MM Manikandan Murugesan Syncfusion Team February 25, 2019 12:11 PM UTC

Hi Georgi, 
Thanks for the reply. 
We have analyzed your query and we can understand that you need to customize the row/column headers. You can customize the row/column headers in the queryCellInfo event. 
Code Snippet: 
    <div id="app"> 
        <ejs-pivotview :dataSource="dataSource" :height"height" :gridSettings"gridSettings"> </ejs-pivotview> 
import Vue from "vue"; 
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview"; 
export default { 
  data () { 
    return { 
      dataSource: { 
        data: [ 
                "name""Skinner Ward", 
                "state""New Jercy" 
                "name""Gwen Dixon", 
                "name""Deena Gillespie", 
                "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; 
In this sample, we have customized the column headers. If this doesn’t match your requirement, kindly provide more details about your requirement with screenshots/video (if possible) which would be helpful for us to proceed further. 

Live Chat Icon For mobile
Up arrow icon