PivotGrid - Custom row name

[Jamal Furuku]

Hello,

is it possible to change default row name in pivot table? In this example the records are grouped by ids, but I want to display user friendly value instead of id. Is there any callback, template or pivot grid setting for this?

Thank you in advance.

BR

Jamal

[Sivamathi Natarajan]

Hi Jamal Furuku, 

 

Thanks for contacting Syncfusion support. 

 

We suspect that your requirement is to bind JSON data with complex objects. And specific key value in the object should be displayed in pivot table. But the pivot table accepts flat JSON data as it's data source. And any complex object inside the JSON isn't supported. So kindly make your data source as flat JSON and bind to the component. 

 

If the above response doesn’t match your requirement then kindly send us more information about your requirement with screenshots/video (if possible) which would be helpful for us to proceed further. 

 

Regards, 

Sivamathi. 

[Jamal Furuku]

Hi Jamal Furuku, 

 

Thanks for contacting Syncfusion support. 

 

We suspect that your requirement is to bind JSON data with complex objects. And specific key value in the object should be displayed in pivot table. But the pivot table accepts flat JSON data as it's data source. And any complex object inside the JSON isn't supported. So kindly make your data source as flat JSON and bind to the component. 

 

If the above response doesn’t match your requirement then kindly send us more information about your requirement with screenshots/video (if possible) which would be helpful for us to proceed further. 

 

Regards, 

Sivamathi. 

Hi, thank you for your response.

I was referring to ability to modify row header (title). For example: In the attached image I want to change timestamp to proper format and add some generic text as prefix. How can I achieve that beside changing the data source beforehand

[Sivamathi Natarajan]

Hi Jamal Furuku, 

 

Kindly customize the row headers in queryCellInfo event. Please check the below code example for your reference. 

 

Code Example: 

<div class="control-section" style="overflow:auto;"> 

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings  

width='100%' height='290'[gridSettings]='gridSettings'  

(enginePopulated)='enginePopulated($event)'> 

  </ejs-pivotview> 

</div> 

 

queryCell(args: any): void { 

    (this.pivotGridObj.renderModule as any).rowCellBoundEvent(args); 

    // Here we have customized the row headers.  

    if (args.cell.classList.contains('e-rowsheader') && args.cell.textContent === "France") { 

      args.cell.querySelector('.e-cellvalue').innerText = "Customize innerText"; 

    } 

  } 

 

  enginePopulated(args: any): void { 

    this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this); 

  } 

 

 

Meanwhile, we have prepared a sample for your reference. Please check the below sample and documentation links for your reference. 

 

Sample: https://stackblitz.com/edit/angular-ukrrws-qv7wee?file=app.component.ts 

 

UG for header customizations: 

For row headers: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#querycellinfo 

For column headers: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#headercellinfo 

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

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Jamal Furuku]

Thank you that was helpful. 

I have one more question: How can I retrieve data (from dataSource) from fields? For example I've got calculated field: Count(id) with hyperlink attached. I want to extract an array of ids after clicking on the hyperlink. I've been staring in the documentation for the last two days without any success :(

Thanks

[Sivamathi Natarajan]

Hi Jamal Furuku, 

 

We would like to inform that the requirement can be achieved by using drill through feature.  

Drill through feature allows to view the underlying raw data of a summarized cell in the pivot table. And by using drillThrough event, you can fetch the raw data which will be triggered during double click on cell. Meanwhile, we have prepared a sample for your reference with calculated field. Please check the below sample and UG. 

 

Sample: https://stackblitz.com/edit/angular-vgwmuk-tkmzy9?file=app.component.ts 

 

UG: https://ej2.syncfusion.com/angular/documentation/pivotview/drill-through/#drillthrough 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.