1. Home
  2. Forum
  3. React - EJ 2
  4. In the react pivot table is there a way to group on an object reference attribute (id) but in the UI show the actual name of the referenced object?

In the react pivot table is there a way to group on an object reference attribute (id) but in the UI show the actual name of the referenced object?

In the react pivot table is there a way to group on an object reference attribute (id) but in the UI show the actual name of the referenced object?

If I use this pivot data source for the Pivot table and group the rows on "ProductId" it will show me the Id's not product names. 

Data source for Pivot table:
[{
"In_Stock": 4,
"Sold": 1,
"ProductId": 1,
"PurchasedOn": "2020-01-01"
},{
"In_Stock": 34,
"Sold": 22,
"ProductId": 1,
"PurchasedOn": "2020-05-01"
},{
"In_Stock": 23,
"Sold": 14,
"ProductId": 2,
"PurchasedOn": "2020-03-01"
},{
"In_Stock": 3,
"Sold": 2,
"ProductId": 2,
"PurchasedOn": "2020-04-01"
},{
"In_Stock": 54,
"Sold": 22,
"ProductId": 2,
"PurchasedOn": "2020-01-01"
},{
"In_Stock": 120,
"Sold": 51,
"ProductId": 3,
"PurchasedOn": "2020-07-01"
},{
"In_Stock": 33,
"Sold": 12,
"ProductId": 3,
"PurchasedOn": "2020-03-01"
}
]


I do have the product names but they are in a separate collection like this:


Products:
[{
"_id": 1,
"Name": "Apples"
},{
"_id": 2,
"Name": "Bananas"
},{
"_id": 3,
"Name": "Cherries"
}]


Is there a way to group on the id but show the actual name from the products collection in the UI? 

I can do some formatting for numbers and dates in value cells but it would be handy to have a custom template option for row and column headers (similar to the template functionality in the datagrid).

Also I found queryCellInfo and headerCellInfo documentation but that solution seems to manipulate the html directly and it not very react like.

So please tell me what is the preferred way of having customised row/column headers.

5 Replies 1 reply marked as answer
SN Sivamathi Natarajan Syncfusion Team August 18, 2020 03:37 PM UTC

 
Thanks for contacting Syncfusion support. 
 
Query 
Response 
Is there a way to group on the id but show the actual name from the products collection in the UI?  
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. 
 
I can do some formatting for numbers and dates in value cells but it would be handy to have a custom template option for row and column headers (similar to the template functionality in the datagrid). 
Please check the below documentation and online demo link of cell template option in pivot table for your reference to customize the row and column headers. 
 
 
 
Meanwhile, we have prepared a sample for your reference. 
 
 
Also I found queryCellInfo and headerCellInfo documentation but that solution seems to manipulate the html directly and it not very react like. 
Could you please share us your exact requirement ? So that we can provide you a better solution. 
So please tell me what is the preferred way of having customised row/column headers. 
You can customize the row/ column headers using headerCellInfo, queryCellInfo events and cell template option. 
 
Please find the UG documentation for each items, 
 
 
CellTemplate:  
 
 
 
 
Please let us know if you have concern. 
 
Regards, 
Sivamathi. 


MR Mark Reestman August 27, 2020 11:51 AM UTC

Thank you for your information. 

The cellTemplate function does not supply me with enough information about the cell content AND it does not replace the original value in the cell it only appends to the cell so the original value is still visible.

So I ended up using the "queryCellInfo" like this:

https://stackblitz.com/edit/react-dpy37z-padwzf?file=index.js

And it now shows the names of the referenced products correctly. 

Although this works ok I do still have some concerns though. As a React developer you do not want to access and manipulate the html dom directly (cell.getElementsByClassName, innerText, cell.classList.contains stuff like that).

It would be more react like if, for example, the cellTemplate function could be expanded with some basic properties (like the 'type' of cell (rowheader, colheader or valuecell) and value and fieldname). 

So something like this:
cellTemplate({ cellType, fieldname, value }) {
   if (fieldname && cellType == 'rowsheader') {
      const product = products.find(p => p._id==value);
      return <span>{product.Name}</span>;
   }
   return;
}

Plus there should be an option for the cellTemplate to replace the content in the 'e-cellvalue' and not append to it. 
My suggestion is very similar to the column template in the ColumnDirective of the Grid component:

Column Template

The column template has options to display custom element instead of a field value in the column.


So my question is is this already possible in a 'React' way like I described? Or are you open for a Feature Request for this scenario? I think uit would improve things fro React developers.

Best regards,

Mark.



SN Sivamathi Natarajan Syncfusion Team August 28, 2020 02:50 PM UTC

 
We are validating the requirement at our end. We will update the further details within two business days (9/1/2020). 
 
Regards, 
Sivamathi. 


SN Sivamathi Natarajan Syncfusion Team September 1, 2020 02:52 PM UTC

 
We have logged your requirement – “To provide additional parameters in cell template event” as a feature task and it will be available in our weekly patch release which is estimated to be rolled out on October 6, 2020 . You can track the same by using the following link:    
 
 
We appreciate your patience until then. 
 
Regards, 
Sivamathi. 


SN Sivamathi Natarajan Syncfusion Team October 14, 2020 04:25 PM UTC

 
Thanks for the patience. 
 
Please find the response, 
 
Query 
Response 
It would be more react like if, for example, the cellTemplate function could be expanded with some basic properties (like the 'type' of cell (rowheader, colheader or valuecell) and value and fieldname).  
The reported requirement (https://www.syncfusion.com/feedback/17507) has been included in the weekly release (v18.2.0.56) and it is available in nuget.org (https://www.nuget.org/). Meanwhile, we have prepared a sample for your reference. 
 
 
Plus there should be an option for the cellTemplate to replace the content in the 'e-cellvalue' and not append to it.  
There is no direct option to achieve the requirement. But kindly use the queryCellInfo event to customize the HTML elements of row headers and value cells. 
 
 
 
 
 
 
Regards, 
Sivamathi. 


Marked as answer
Loader.
Up arrow icon