Drag&Drop over Splitter windows / Scheduler issues

[Bernd]

Ok, this is a little more complex issue with multiple questions.

1.) I have setup a Splitter Component in a Window Component. In one of the Splitter-Windows I have buttons which I have "enhanced" with the Drag&Drop functionality and that works only inside the same Splitter window, meaning I can't move them from one Splitter window to another. Is it possible to use the DragAndDrop over multiple Splitter windows? See attached screenshot. I have currently put the <DragAndDrop> around the <Splitter> Component like below but it doesn't seem to help.

<DragAndDrop>
    <Splitter
        style={{ height: '100%' }}
        panes={outerPanes}
        orientation="horizontal"
        onChange={splitterOuterChange}
    >
        <WeekCalendarProfiles program={props.item} />
        <Splitter
            style={{ height: '100%' }}
            panes={innerPanes}
            orientation="vertical"
            onChange={splitterInnerChange}
        >
            <WeekCalendar program={props.item} />
            <WeekCalendarChannels program={props.item} />
        </Splitter>
    </Splitter>
</DragAndDrop>

2.) As you can see, in the main Splitter Window I have a Scheduler instance. I have added the drop target for the drag&drop to a CustomViewSlot like this:

    const CustomViewSlot = (props: SchedulerViewSlotProps) => {
        return (
            <>
                <DroppableBox onDrop={handleDrop} id={guid()} selected={selected}>
                    <SchedulerViewSlot {...props} style={{ ...props.style }} />
                </DroppableBox>
            </>
        );
    };

My issue is: How would I be able to get access to the data of the slot where there box would be dropped and trigger an add dialog for an event?

3.) The CustomViewSlot will automatically get assigned to all slots of the calendar view. Is it possible to assign the CustomViewSlot to the 'all day' slots only?

Thanks!

[Bernd]

I think I can solve number 2 and 3 myself. But I can't get number 1 to work. Is there any way to handle this?

[Filip]

Hi, Bernd,

It is possible to drag and drop between one splitter window to another by using DragAndDrop like shown in the following example:

https://stackblitz.com/edit/react-lwhwql?file=app/main.jsx 

where the Splitter window is wrapped inside the DragAndDrop component and the Splitter windows contain dropable boxes.

More information about the dropable functionality can be found here:

https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/droppable/

I hope this helps.

Regards, FilipProgress Telerik

[Bernd]

Hi Filip.

Thanks for the answer, but I think it would be more user friendly, if the button I can drag would stay on top instead of moving "behind" the splitter screen with the drop target (see attached image). I tried to fiddle with the z-index but it didn't really help what I did. Any idea how to solve this?

Thanks.

[Filip]

Hello, Bernd,

This happens because Splitter panes are scrollable (overflow:auto). By targeting the following classes and changing the overflow property to visible the button now stays on top:

.k-splitter .k-scrollable {
              overflow: visible;
              }

I updated the stackblitz demo here:

https://stackblitz.com/edit/react-lwhwql-m7a6qp?file=index.html

Regards,
Filip