[Bug] Grip GroupPanel ListChip Chip loose Title when the column is hidden after grouping on it

[xyseb]

I'm submitting an issue about the GroupPanel component of the Grid

The GroupPanel of the Grid is actually not exposed by the GridHelper and It isn't easy to customize it.
The main problem about that is the following. When you test grouping a column and hide it, the corresponding GroupPanel Chip loose the references to the title name of the colunm and fallback to the field value. So you have a Chip with a name like

Current behavior

The Chip component loose the original Title when the Column is hidden and fallback to the field props

Expected behavior

The Chip component not loose the original Title of its GroupColumn when is hidden.

Minimal reproduction of the problem with instructions

From https://www.telerik.com/kendo-react-ui/components/grid/getting-started/gridhelper/ :

• Start grouping on the Price column and hide this column. The value become UnitPrice.
• Try hidding another column like "Category Name". TRhe value become Category.CategoryName.

What is the motivation or use case for changing the behavior?

In my use case it seem intresting to hide grouping colomn to simplify the Grouped rows

Environment

Current release

Browser:
all

Extra expectation

It would be great if GridHelper could also expose the GroupPanel component so that you can simply customize its rendering (for example). A bit like what's done for the GridToolbar component.

Best regards

[kdikov82]

When there is no column in the columns collection for a grouped field, the Grid will not be able to use the "title" in the group header (since that column does not exist for the Grid).

For handling this scenario, you can manually replace the text in the Chip components:

  React.useEffect(() => {
    let groupChipElements = document.querySelectorAll(
      '.k-grid .k-chip-content'
    );
    groupChipElements.forEach((chip) => {
      if (chip.innerHTML == 'Category.CategoryName') {
        chip.innerHTML = 'Category Name';
      }
    });
  });

Here is an updated example where the above code is added within the GridHelper:
https://stackblitz.com/edit/react-stjs7f-6vditf?file=app%2FGridHelper.jsx