DataGrid grouping shows [object Object] if a column is rendered with queryCellInfo

Question

Hello guys,as mentioned in the subject, I have a problem with grouping in the React DataGrid.When I try to group by a column which value is rendered with queryCellInfo, it's shown like this:How do I handle this kind of situation?Thanks for the help.

Sujith Kumar Rajkumar · Accepted Answer

Hi Nicola,

Based on the provided information we could understand that you have rendered a custom component in the cell using queryCellInfo event and suspect that this might be why the group caption is displayed as ‘[object Object]’. We would like to let you know that the queryCellInfo event is only used for modifying the cell values in the UI level and it will not affect the Grid’s data source. And the Grid actions like, Grouping, Sorting will be performed based on the underlying data source of the column field value, so the cell changes in the queryCellInfo event will not affect the grouping action.

Your reported problem will occur if the object data type is present in the underlying data source for the column and as previously mentioned the object data type is not supported in the EJ2 Grid and that is why the group caption text might be displayed like you have mentioned. So you can achieve the mentioned requirement(changing/hiding the group caption value) using one of the below approaches,

Hiding the group caption text:

You can hide the group caption text by using the following CSS style,

.e-grid .e-groupcaption {

display: none;

}

Changing the group caption text:

You can customize the group caption text by using the groupSettings captionTemplate property. Using this you can display the required text value as the group caption text. More details on this can be checked in the below documentation link,

Documentation: https://ej2.syncfusion.com/react/documentation/grid/grouping/#caption-template

Disabling grouping for the custom component rendered column:

Alternatively you can also disable grouping for the column where custom component is rendered by disabling the columns allowGrouping property as demonstrated in the below code snippet,

<e-column field='Mainfieldsofinvention' headerText='Main fields of invention' [allowGrouping]="false" width='200'></e-column>

If this does not help achieve your requirement, then please elaborate on the requirement and share us the Grid code file(for checking how you have rendered the custom component in the queryCellInfo event) to validate further on this.

Regards,

Sujith R

Sujith Kumar Rajkumar · Answer

Hi Nicola, 
 
Greetings from Syncfusion support. 
 
Based on the provided information we could understand that you are facing the mentioned issue when modifying the cell values using the queryCellInfo event. We suspect that you might be facing this problem because of setting an object as cell value using the event. If so we would like to let you know that the EJ2 Grid does not have support for object column type. The supported column types are mentioned below, 
 

string
number
boolean
date
datetime
 
Column type documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/#column-type 
 
If you have not set object type then please share us the following information to validate further on this, 
 

Let us know what value you are setting in the Grid’s queryCellInfo event handler. Also share us the code snippet for the same.
Syncfusion package version used.
Grid code file.
 
Regards, 
Sujith R

soon · Answer

Thank you for answering, I know that I'm passing an object to the column, the queryCellInfo method is needed because I have to translate the field, and show a custom component. I can't add the code in here, it would be nice if there is something I can do to change that [object Object] to the same value shown in the custom cell, or if I can hide that in some ways.

Looking forward

soon · Answer

Changing the group caption text:  You can customize the group caption text by using the groupSettings captionTemplate property. Using this, you can display the required text value as the group caption text. More details on this can be checked in the below documentation link,  Documentation: https://ej2.syncfusion.com/react/documentation/grid/grouping/#caption-templateThanks for the answer. This may be the sweet spot for me, but I didn't mange to find which fields I can insert in the captionTemplate. In the documentation I only saw ${field} ${count}, are there more than these two?

Sujith Kumar Rajkumar · Answer

Hi Nicola,

Based on the query we would like to let you know that the following data can be accessed for each group in the group caption template,

aggregates
count
field
items
key

This data structure is shown in the below image for your reference,

You can also define the template as a function and access the group data which will be returned as function arguments as demonstrated in the below code snippet,

constructor() {

super(...arguments);

this.groupOptions = { columns: ['Country'], captionTemplate: this.groupTemplate.bind(this) };

}

groupTemplate(props) {

return (<div>

<span>{props.field} : {props.key} - {props.count} Items</span>

</div>);

}

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://stackblitz.com/edit/react-5efgp3

Let us know if you have any concerns.

Regards,

Sujith R

{props.field} : {props.key} - {props.count} Items

); } We have prepared a sample based on this for your reference. You can find it below, Sample: https://stackblitz.com/edit/react-5efgp3 Let us know if you have any concerns. Regards, Sujith R

soon · Answer

Thank you for the example and the exhaustive explication, you can consider the issue closed.Regards,NM

Sujith Kumar Rajkumar · Answer

Hi Nicola, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 
Sujith R