[Solved] Scheduler Timeline View - How to set resource column width with vertical grouping?

[Katia]

Hi,

I am building a fleet management planning application using the Telerik Blazor Scheduler with around 400 vehicle resources.

Context: I use the Timeline view with vertical grouping and it works perfectly. I also need a Day view, but vertical grouping in Day view is not an option for me — it generates 24 time slots per resource, which makes the page extremely heavy and causes it to crash with 400 resources. So I am using horizontal grouping for the Day view instead.

The problem: With horizontal grouping in Day view and many resources, the resource label columns are very small and the text becomes unreadable. After inspecting the generated HTML, I noticed an "overflox: hidden" rule on the resource label cells that seems to be constraining their width to the minimum available space rather than fitting the content.

I tried removing this CSS rule which makes the text readable, but it breaks the alignment between the resource labels and the scheduler body slots.

My questions:

• Is there a native parameter to control the resource column width in this configuration?
• If not, what is the recommended CSS approach to resize the columns without breaking the slot alignment?

Thank you in advance.

[Ivan Danchev]

Hi Katia,

There is no built-in parameter that controls the resources column width. And modifying only the label width inevitably would lead to misalignment.  

A possible approach involving custom CSS is shown in this example: https://blazorrepl.telerik.com/QgaJYFFm35VWdzAr16

300 resources are shown grouped horizontally in the Day view. 

min-width is set on .k-scheduler-layout-flex — the one shared parent container that all rows (resource header, date header, all-day, body slots) reside in:

.scheduler-many-resources .k-scheduler-layout-flex {
    min-width: calc(var(--scheduler-resource-count) * var(--scheduler-col-min-width));
}

This forces the layout to be wide enough that flex: 1 1 100% per cell distributes to at least 120px each. Because every row shares this same container width, all rows distribute their cells to the exact same widths — alignment is maintained by the normal flex algorithm, not by any overrides.
The CSS custom properties are set on a wrapper <div> from C# (@Rooms.Count) so the threshold is always exact regardless of how many resources you have.

Regards,
Ivan Danchev
Progress Telerik