Kendo-angular: BUG req.: solution for fixed (locked) columns with grouping and control widht/height setting with units

[hidegh]

I was trying to solve the issue with locked columns and grouping rows. A partial solution was found below, but it seems that the overflow-visible style on the .k-grid .k-grid-content-locked results in the locked columns not being vertically "synced" moved with the rest of the data. See screenshot:

To fix:

1. make grouping rows stretch over entire grid (even with those acceptable caveats discussed below, but without the scrolling BUG)
2. make the fixed columns not requiring all columns to have width set (just the frozen ones)
3. make all width/height values a string|number as having the possibility to set widths with units (em/rem) is necessary (even bootstrap 4 now works with em/rem units, except their grid system padding/margins)

---

When locked columns are used with grouping, the group header won't stretch over the entire grid - see: https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/

Although there is a way to bypass the limitation (If the Grid has its grouping feature enabled, the group header row will be truncated to the locked section) with a caveat - long texts won't be wrapped so might be truncated (and of course container must not have overflow allowed).

There's an annoying limitation of needing all columns to have fixed size, not just the locked ones.

without locked column (or with fix applied)

un-patched locked column with grouping:

/*
Kendo GRID - when locked columns make sure that the grouping header is full size (or at least something like that)
*/
.k-grid.k-grid-fix-locked-columns .k-grid-content-locked, 
.k-grid[fix-locked-columns] .k-grid-content-locked {
    overflow: visible;
    z-index: 1000;
}

.k-grid.k-grid-fix-locked-columns .k-grid-content-locked .k-grouping-row,
.k-grid[fix-locked-columns] .k-grid-content-locked .k-grouping-row {
    white-space: nowrap;
}

[tsvetomir]

@hidegh thanks for suggesting a workaround for this limitation of the Grid. We tried something similar, but didn't find it suitable for general use.

A possible solution would be to use position: sticky instead of a separate table for the locked section — see this example from KendoReact. This would allow group headers to span over the entire visible area.

There's a catch, this approach is not compatible with IE. We're still seeing significant usage of IE 11 (and even 10) to consider it as a drop-in replacement. Nonetheless, the current approach is creating a lot of problems and we're contemplating a solution that would allow gradual migration from it.

[tsvetomir]

I'll close this issue and leave it as a community resource. We can still use it to discuss the underlying limitation and possible solutions.