Pivot View Column header manipulation

[Dipesh Nayak]

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]

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: [], 

    }; 

 

 

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/customize-number-date-and-time-values/#date-and-time-formatting 

 

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. 

 

Sample Link: https://stackblitz.com/edit/angular-ngeijz-mdvrbx?file=app.component.ts 

 

Please let us know, if you need further assistance on this. 

 

Regards, 

Sivamathi. 

[Dipesh Nayak]

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]

Hi Dipesh, 

 

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. 

 

Sample Link: https://stackblitz.com/edit/angular-ngeijz-s84nm7?file=app.component.ts 

 

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]

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]

Hi Dipesh, 

 

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; 

      } 

    } 

 

 

Sample Link: https://stackblitz.com/edit/angular-ngeijz-qfr6c9?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Dipesh Nayak]

This is Perfect.Thanks a lot.

[Sivamathi Natarajan]

Hi Dipesh, 

 

Thanks for the response. 

 

Please let us know, if you need any further assistance. As always, we will happy to assist you. 

 

Regards, 

Sivamathi.