How to get sticky row with draggable SchedulerItems on Scheduler

[Thomas]

On the Scheduler, we have three requirements that we need to implement on the first row:

• We need the first row (Open Shift) to be "sticky" and to stay in view at the top of the Scheduler as we scroll
• We need the SchedulerItems within the sticky row to remain inside the sticky row as we scroll
• We need to be able to drag SchedulerItems from the sticky row into different lower rows

We got close to implementing these features with the WeekView, but our rows need to correspond to employees and not hours, and we add the employee data as resources.  Every time we add resources to the Scheduler with the WeekView it adds them as an additional row column instead of replacing the hours column. We also tried creating our own custom slot to have the SchedulerItems remain sticky when scrolling, but it still wouldn't remain in the sticky row.

So my specific questions are: 1) Can the three requirements be implemented in the Scheduler? 2) Is using resources the correct way to add the employee column for the rows? If not, what is the correct approach?

[Konstantin Dikov]

Hi Thomas,

The layout that you want to achieve is not supported by the KendoReact Scheduler and the only option for achieving it would be by using CSS to hide the elements that you don't want to be visible:

• https://stackblitz.com/edit/react-ncjlar-ksmlrt?file=app%2Fmain.tsx,index.html

            <style>
                .k-scheduler-cell.k-group-content.k-resource-row .k-scheduler-row:nth-child(2){
                    display: none;
                }
                .k-scheduler-cell.k-heading-cell.k-side-cell.k-scheduler-times-all-day{
                    display: none;
                }
                div.k-scheduler-layout.k-scheduler-layout-flex.k-scheduler-day-view > div.k-scheduler-head > div > div > div.k-scheduler-cell.k-side-cell{
                    display: none;
                }
                .k-scheduler-cell.k-group-cell.k-heading-cell{
                    overflow: hidden;
                } 

As for making one of the resources sticky, I am not sure if it would be possible. I have made the first row sticky with CSS, but once the events are added, this will most likely break:

• https://stackblitz.com/edit/react-ncjlar-xrwvf9?file=app%2Fmain.tsx,index.html

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik