Merge pull request #1930 from telerik/new-kb-listview-scheduler-drag-and-drop-189f2b44512d4ae6b584309af7c98057

docs(scheduler): add new kb article listview-scheduler-drag-and-drop

Author: vveesseelliinnaa

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 (
+      <div
+        draggable={true}
+        className="k-listview-item"
+        onDragStart={() => {
+          refDragItem.current = props.dataItem;
+        }}
+        style={{ padding: 10, borderBottom: '1px solid lightgrey' }}
+      >
+        {item.title}
+      </div>
+    );
+  };
+  return (
+    <>
+      <Scheduler
+        data={data}
+        defaultDate={new Date('2013/6/13')}
+        ref={MyScheduler}
+      >
+        <WeekView showWorkHours={false} />
+        <MonthView />
+      </Scheduler>
+      <hr />
+      <ListView
+        data={gridData}
+        item={MyItemRender}
+        style={{ width: '100%', height: 600 }}
+      />
+    </>
+  );
+};
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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/)