Hello.
I'm using the grid with grouping version 11. I don't set the column widths. A question about the lockGroups property. If you do not use it, the width of the header and grid columns is the same, and the name of the dimension is displayed in one row (example 1).
If you add lockGroups, the width of the header and grid columns does not match and each word of the group name is moved to a separate line (example 2).
If you add width to the columns, then the columns begin to match, except for the last one, but this does not help the names of the groups.
By adding the lockGroups property, how can I save the display of the original grid, where everything matches (as example 1)?
example 1:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fmain.tsx,app%2Fapp.tsx
example 2:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fapp.tsx
Thank you!
I'm using the grid with grouping version 11. I don't set the column widths. A question about the lockGroups property. If you do not use it, the width of the header and grid columns is the same, and the name of the dimension is displayed in one row (example 1).
If you add lockGroups, the width of the header and grid columns does not match and each word of the group name is moved to a separate line (example 2).
If you add width to the columns, then the columns begin to match, except for the last one, but this does not help the names of the groups.
By adding the lockGroups property, how can I save the display of the original grid, where everything matches (as example 1)?
example 1:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fmain.tsx,app%2Fapp.tsx
example 2:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fapp.tsx
Thank you!
2 Answers, 1 is accepted
0
Hello, Andrei,
Thank you for the provided examples.
After testing, I found that enabling the lockGroups prop causes the text to wrap, resulting in the observed UI. After further testing I was able to resolve it with the following CSS:
.k-grid .k-grouping-row {
white-space: nowrap;
}This approach seems to preserve the display of the text. Here is the updated example:
I hope this helps, but please let me know in case further questions arise on this matter.
Regards,
Filip
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
0
Andrei
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered on 19 Aug 2025, 03:34 PM
Thank you for your decision!
The names of the groups have indeed been fixed. But the issue with the columns still remains relevant. If you do not explicitly set the width of the columns, then when grouping, the width of the grid columns does not match the width of the header columns, as I described earlier and as can be seen from the example.
https://stackblitz.com/edit/react-qjv8cnyt-xplfva1c?file=index.html,app%2Fapp.tsx
The names of the groups have indeed been fixed. But the issue with the columns still remains relevant. If you do not explicitly set the width of the columns, then when grouping, the width of the grid columns does not match the width of the header columns, as I described earlier and as can be seen from the example.
https://stackblitz.com/edit/react-qjv8cnyt-xplfva1c?file=index.html,app%2Fapp.tsx
Filip
commented on 21 Aug 2025, 02:36 PM
Telerik team
Hi, Andrei,
Thank you for the clarification, you are correct that the column issue is still relevant. After reviewing the shared example in more detail, the behavior is expected, as locked groups require all columns to have fixed widths. Unfortunately, this detail is missing from the locked groups documentation, and I apologize for the oversight. We will make sure the article is updated accordingly.
Regards,
Filip
Thank you for the clarification, you are correct that the column issue is still relevant. After reviewing the shared example in more detail, the behavior is expected, as locked groups require all columns to have fixed widths. Unfortunately, this detail is missing from the locked groups documentation, and I apologize for the oversight. We will make sure the article is updated accordingly.
Regards,
Filip