Hi,
How to hide the grouped columns automatically in grid? After a column is grouped (by dragging and dropped into the drag and drop area), I want to hide the columns that have been grouped. See the attached screenshot.
My current approach is to set the column width to zero, resizable to false, minResizableWidth to zero. It works fine so far, but it feels like a hack.
Thanks,
Jie
1 Answer, 1 is accepted
Hi, Jie,
Thank you for the provided screenshot.
You can achieve this by rendering the columns dynamically.
In the below example, each object in the `columns` array has a `show` property which based on its value, I am rendering the GridColumn. In addition, in the `onDataStateChange` function, I am setting the show property to false to every column that is grouped:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 3
Iron
Iron
Iron
Hi Wissam,
There is a problem with dynamic columns. The grid doesn't know the column's title anymore. In your example, the button has text "UnitPrice" which is the field name. It is supposed to be the title "Unit Price" (with space between words). My guess is because the UnitPrice column is not passed to the grid, so grid doesn't know the column title. In my case, I have nested properties like "Foo.Bar.Name", and the button will show "Foo.Bar.Name" instead of the title.
Thanks,
Jie
Hi Jie,
Your assumption is correct and since the grouped columns are not added to the Grid, the group header will display the original field name available within the group expression. The only option for changing the text would be to manually find the group element and replace the field name. Here is an example demonstrating this approach:
You can add mapping logic for all column names (within the React.useEffect in the example), so they can be replaced accordingly if multiple groups are added.
Rank 3
Iron
Iron
Iron
Hi Konstantin,
That makes sense. Comparing this to the approach in my original post (setting width to zero), any pros and cons?
My example: https://stackblitz.com/edit/react-fw26th-2kabkc?file=app%2Fmain.jsx%3AL82
Thanks,
Jie
Hi Jie,
The approach with the width set to zero is more clean for sure and the only downside is that the column will actually be rendered in the DOM, which with a reasonable amount of data items will not make any difference at all, so you might keep using it. The benefit of this method is that you don't have to manually replace the text value in the group header element.