diff --git a/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx b/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx new file mode 100644 index 00000000..fcf84b93 --- /dev/null +++ b/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { + Scheduler, + WeekView, + MonthView, +} from '@progress/kendo-react-scheduler'; +import { ListView, ListViewItemProps } from '@progress/kendo-react-listview'; + +import { Grid, GridColumn } from '@progress/kendo-react-grid'; + +import gridData from './data.js'; + +const handleDragOver = (e) => { + e.preventDefault(); +}; + +const App = () => { + const MyScheduler = React.useRef(); + const refData = React.useRef(); + const refDragItem = React.useRef(); + const [data, setData] = React.useState([]); + + refData.current = data; + refDragItem.current = null; + + const handleDropItem = React.useCallback((e) => { + let start = e.target.getAttribute('data-slot-start'); + let end = e.target.getAttribute('data-slot-end'); + let startDate = new Date(parseInt(start)); + let endDate = new Date(parseInt(end)); + + let newEvent = { + id: refDragItem.current.taskID, + title: refDragItem.current.title, + StartTimezone: null, + start: startDate, + end: endDate, + }; + const newData = [newEvent, ...refData.current]; + refData.current = newData; + setData(newData); + }, []); + + React.useEffect(() => { + let schedulerElement = MyScheduler.current.element; + schedulerElement.addEventListener('drop', handleDropItem); + schedulerElement.addEventListener('dragover', handleDragOver); + return () => { + schedulerElement.removeEventListener('drop', handleDropItem); + schedulerElement.removeEventListener('dragover', handleDragOver); + }; + }, []); + + const MyItemRender = (props) => { + let item = props.dataItem; + return ( +
{ + refDragItem.current = props.dataItem; + }} + style={{ padding: 10, borderBottom: '1px solid lightgrey' }} + > + {item.title} +
+ ); + }; + return ( + <> + + + + +
+ + + ); +}; + +ReactDOM.render(, document.querySelector('my-app')); diff --git a/knowledge-base/listview-scheduler-drag-and-drop.md b/knowledge-base/listview-scheduler-drag-and-drop.md new file mode 100644 index 00000000..6565144e --- /dev/null +++ b/knowledge-base/listview-scheduler-drag-and-drop.md @@ -0,0 +1,44 @@ +--- +title: Drag and Drop Items from KendoReact ListView to KendoReact Scheduler +description: Learn how to enable drag and drop functionality between KendoReact ListView and Scheduler components. +type: how-to +page_title: How to Enable Drag and Drop between KendoReact ListView and Scheduler +slug: drag-drop-kendoreact-listview-scheduler +tags: react, kendoReact, drag and drop, ListView, Scheduler +res_type: kb +--- + +## Environment + +| Property | Value | +| --- | --- | +| Product | KendoReact | +| Version | 7.0.2| + +## Description + +Looking for a drag and drop between KendoReact ListView and KendoReact Scheduler. I want to transfer items from the ListView to the Scheduler. + +## Solution + +To enable drag and drop functionality between a KendoReact ListView and a KendoReact Scheduler, follow these steps: + +1. Render a custom ListView item by using the [`item`](https://www.telerik.com/kendo-react-ui/components/listview/api/ListViewProps/#toc-item) prop. This allows you to make the row draggable and obtain the currently dragged item. +1. Add an `onDropEvent` to the Scheduler container using the [component ref](https://react.dev/reference/react/useRef). +1. When the user drops an item, add it to the Scheduler data by updating the state. + +{% meta id:index height:900 %} +{% embed_file scheduler/dnd-from-listview/main.jsx preview %} +{% embed_file shared/data.js %} +{% endmeta %} + +## Notes + +- Make sure to install the required dependencies, such as `react-dnd`, `@progress/kendo-react-listview`, and `@progress/kendo-react-scheduler`. +- Refer to the official documentation for more information on the `DragSource` and `useRef` APIs. +- Adjust the code according to your specific use case and requirements. + +## See Also + +- [KendoReact ListView Documentation](https://www.telerik.com/kendo-react-ui/components/listview/) +- [KendoReact Scheduler Documentation](https://www.telerik.com/kendo-react-ui/components/scheduler/)