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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Column names

Thread ID:

Created:

Updated:

Platform:

Replies:

142697 Feb 15,2019 11:35 AM UTC Feb 25,2019 12:11 PM UTC Vue 3
loading
Tags: PivotView
Kaloyan Stefanov
Asked On February 15, 2019 11:35 AM UTC

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

Arulraj A [Syncfusion]
Replied On 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. 

Regards, 
Arulraj A 


Georgi Panayotov
Replied On 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.

Manikandan Murugesan [Syncfusion]
Replied On 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: 
<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> 
  
  
  
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. 
 
Regards, 
Manikandan. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;