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

Pivot View Column header manipulation

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.

7 Replies

SN Sivamathi Natarajan Syncfusion Team December 29, 2019 11:30 PM

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. 



DN Dipesh Nayak January 3, 2020 05:45 AM

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.


SN Sivamathi Natarajan Syncfusion Team January 6, 2020 01:30 AM

 
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. 



DN Dipesh Nayak January 7, 2020 04:09 AM

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


SN Sivamathi Natarajan Syncfusion Team January 7, 2020 04:42 AM

 
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. 



DN Dipesh Nayak January 9, 2020 12:18 AM

This is Perfect.Thanks a lot.


SN Sivamathi Natarajan Syncfusion Team January 9, 2020 10:32 PM

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


Loader.
Live Chat Icon For mobile
Up arrow icon