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>
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!
Rank 5
Bronze
Bronze
Bronze
1 Answer, 1 is accepted
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
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.
Rank 5
Bronze
Bronze
Bronze
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.
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