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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pivot View Column header manipulation

Thread ID:

Created:

Updated:

Platform:

Replies:

150179 Dec 24,2019 04:47 AM UTC Jan 10,2020 06:32 AM UTC Angular - EJ 2 7
loading
Tags: PivotView
Dipesh Nayak
Asked On December 24, 2019 04:47 AM UTC

How can i rename column headers after the grid population,like i have headers 2015-01,2015-04 ,and i want them to be replaced as 2015-Jan,2015-Apr. So that columns will be on perfect order.

Sivamathi Natarajan [Syncfusion]
Replied On December 30, 2019 07:30 AM UTC

Hi Dipesh, 
 
Thanks for contacting Syncfusion Support. 
 
You can format the date field as shown in the following code example. 
 
Code Example: 
 
this.dataSourceSettings = { 
      enableSorting: true, 
      columns: [{ name: 'Date' }], 
      values: [{ name: 'Qty 1', caption: 'Units Sold' }, { name: 'Qty 2', caption: 'Units Amount' }], 
      dataSource: this.getPivotData(), 
      rows: [{ name: 'Product' }], 
       formatSettings: [{ name: 'Date', format: 'yyyy-MMM', type: 'date' }], 
      expandAll: false, 
      filters: [], 
    }; 
 
 
 
Please check the below screenshot. We have customized column headers from ‘2015-01’ to ‘2015-Jan’. 
 
 
 
 
Also, you can customize the string data through queryCellInfo event. Kindly refer the below code example. 
 
Code Example: 
 
<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%' height='300' 
        (enginePopulated)='enginePopulated($event)' showFieldList='true' > 
    </ejs-pivotview> 
 
 
queryCell(args: any): void { 
    (this.pivotGridObj.renderModule as any).rowCellBoundEvent(args); 
   // Here we have customize the row headers.  
    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; 
    } 
  } 
 
  enginePopulated(args: any): void { 
    this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this); 
  } 
 
 
Please check the below screenshot. We have displayed row headers as custom text (field name: row headers). 
 
 
 
Meanwhile, we have prepared a sample for you reference. 
 
 
Please let us know, if you need further assistance on this. 
 
Regards, 
Sivamathi. 


Dipesh Nayak
Replied On January 3, 2020 01:45 PM UTC

Thanks Sivamathi ,
But i want to modify Date column headers through queryCellInfo event not by format setting, can i do that? I have tried args.cell.classList.contains('e-columnheader') but this query does not returns anything.

Sivamathi Natarajan [Syncfusion]
Replied On January 6, 2020 09:30 AM UTC

 
Thanks for the response, 
 
The event queryCellInfo will fire on rendering row and value cells. The event headerCellInfo will fire on rendering column headers. So, kindly use the headerCellInfo event to customize the column headers. 
 
Kindly check the below code example for your reference. 
 
Code Example: 
  <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%' height='300'(enginePopulated)='enginePopulated($event)' showFieldList='true' > 
 
 
  headerCell(args: any): void { 
    if (args.node.innerText) { 
      var month = args.node.innerText.split('-')[1]; 
      switch (month) { 
        case '01': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jan'; 
          break; 
        case '02': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Feb'; 
          break; 
        case '03': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Mar'; 
          break; 
        case '04': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Apr'; 
          break; 
        case '05': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'May'; 
          break; 
        case '06': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jun'; 
          break; 
        case '07': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jul'; 
          break; 
        case '08': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Aug'; 
          break; 
        case '09': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Sep'; 
          break; 
        case '10': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Oct'; 
          break; 
        case '11': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Nov'; 
          break; 
        case '12': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Dec'; 
          break; 
      } 
    } 
  } 
 
  enginePopulated(args: any): void { 
    this.pivotGridObj.grid.headerCellInfo = this.headerCell.bind(this); 
  } 
 
 
Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link for your reference. 
 
 
Please check the below screenshot. We have customized column headers from ‘2009-01’ to ‘2009-Jan’. 
 
 
We hope that the above sample will meet your requirement. 
 
Regards, 
Sivamathi. 


Dipesh Nayak
Replied On January 7, 2020 12:09 PM UTC

Thanks Sivamathi, headerCellInfo event working fine when using single column ,but when using multiple column, lets say
columns: [{ name: 'Quarter' },{name:'Date'}], in this case Only Quarter column being rendered.Same configuration working fine when headerCellInfo not used.
I have attached my AppComponent class,Please have a look.


Attachment: app.component_3e7d7567.zip

Sivamathi Natarajan [Syncfusion]
Replied On January 7, 2020 12:42 PM UTC

 
We have fixed the reported issue using following code example. 
 
Code Example: 
 
headerCell(args: any): void { 
    (this.pivotGridObj.renderModule as any).columnCellBoundEvent(args); 
    if (args.node.innerText) { 
      var month = args.node.innerText.split('-')[1]; 
      switch (month) { 
        case '01': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jan'; 
          break; 
        case '02': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Feb'; 
          break; 
        case '03': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Mar'; 
          break; 
        case '04': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Apr'; 
          break; 
        case '05': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'May'; 
          break; 
        case '06': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jun'; 
          break; 
        case '07': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Jul'; 
          break; 
        case '08': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Aug'; 
          break; 
        case '09': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Sep'; 
          break; 
        case '10': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Oct'; 
          break; 
        case '11': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Nov'; 
          break; 
        case '12': 
          args.node.innerText = args.node.innerText.split('-')[0] + '-' + 'Dec'; 
          break; 
      } 
    } 
 
 
 
Please let us know if you have concern. 
 
Regards, 
Sivamathi. 


Dipesh Nayak
Replied On January 9, 2020 08:18 AM UTC

This is Perfect.Thanks a lot.

Sivamathi Natarajan [Syncfusion]
Replied On January 10, 2020 06:32 AM UTC

 
Thanks for the response. 
 
Please let us know, if you need any further assistance. As always, we will happy to assist you. 
 
Regards, 
Sivamathi. 


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

Live Chat Icon For mobile
Live Chat Icon