Hi Everyone I'm very new to React and Kendo React. I'm trying to use the kendo react scheduler with a drag and drop from a kendo react grid using this tutorial https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-scheduler-drag-and-drop/ but for some reason when handling the Drop to the scheduler the Listener is returning every pervious event and sometimes a undefined event. Ive tried to clear the addlistener event each time the drop is fired but still cant figure this out. Any import would be very helpful!
import * as React from "react";
import { guid } from "@progress/kendo-react-common";
import { timezoneNames } from "@progress/kendo-date-math";
import {
Scheduler,
TimelineView,
DayView,
WeekView,
MonthView,
AgendaView,
} from "@progress/kendo-react-scheduler";
import "@progress/kendo-date-math/tz/Etc/UTC";
import "@progress/kendo-date-math/tz/Europe/Sofia";
import "@progress/kendo-date-math/tz/Europe/Madrid";
import "@progress/kendo-date-math/tz/Asia/Dubai";
import "@progress/kendo-date-math/tz/Asia/Tokyo";
import "@progress/kendo-date-math/tz/America/New_York";
import "@progress/kendo-date-math/tz/America/Los_Angeles";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import gridData from "../StaticData/data.js";
import {
sampleDataWithCustomSchema,
displayDate,
customModelFields,
} from "../StaticData/events-utc";
const Schedule = () => {
const timezones = React.useMemo(() => timezoneNames(), []);
const locales = [
{
language: "en-US",
locale: "en",
},
{
language: "es-ES",
locale: "es",
},
];
const [view, setView] = React.useState("day");
const [date, setDate] = React.useState(displayDate);
const [locale, setLocale] = React.useState(locales[0]);
const [timezone, setTimezone] = React.useState("Etc/UTC");
const [orientation, setOrientation] = React.useState("horizontal");
const [data, setData] = React.useState(sampleDataWithCustomSchema);
const [Griddata, setGridData] = React.useState(gridData);
const handleViewChange = React.useCallback(
(event) => {
setView(event.value);
},
[setView]
);
const handleDateChange = React.useCallback(
(event) => {
setDate(event.value);
},
[setDate]
);
const handleLocaleChange = React.useCallback(
(event) => {
setLocale(event.target.value);
},
[setLocale]
);
const handleTimezoneChange = React.useCallback(
(event) => {
setTimezone(event.target.value);
},
[setTimezone]
);
const handleDataChange = React.useCallback(
({ created, updated, deleted }) => {
setData((old) =>
old
.filter(
(item) =>
deleted.find((current) => current.TaskID === item.TaskID) ===
undefined
)
.map(
(item) =>
updated.find((current) => current.TaskID === item.TaskID) || item
)
.concat(
created.map((item) =>
Object.assign({}, item, {
TaskID: guid(),
})
)
)
);
},
[setData]
);
function Exists(taskId) {
return data.some(function(el) {
return el.TaskID === taskId;
});
}
const handleDropItem = (e) => {
console.log(dragItem)
// if(Exists(dragItem.taskID)==false ){
// let start = e.target.getAttribute("data-slot-start");
// let end = e.target.getAttribute("data-slot-end");
// let room = e.target.getAttribute("data-slot-group");
// let startDate = new Date(parseInt(start));
// let endDate = new Date(parseInt(end));
// let newEvent = {
// TaskID: dragItem.taskID,
// End: endDate,
// PersonIDs: 1,
// RoomID: 2,
// Start: startDate,
// Title: dragItem.title ,
// isAllDay: false
// }
// setData(oldData=>[newEvent, ...oldData])
// setGridData(Griddata.filter(item=>item.taskID!== dragItem.taskID))
// }
};
React.useEffect(() => {
let schedulerElement = MyScheduler.current.element;
schedulerElement.addEventListener("drop", handleDropItem);
schedulerElement.addEventListener("dragover", (e) => e.preventDefault());
});
React.useEffect(() => {
}, [data]);
const MyScheduler = React.createRef();
const [dragItem, setDragItem] = React.useState("");
const GridRowRender = (tr, props) => {
const trProps = {
draggable: true,
onDragStart: (e) => {
console.log(e)
setDragItem(props.dataItem);
}
};
return React.cloneElement(tr, { ...trProps }, tr.props.children);
};
return (
<div>
<Scheduler
data={data}
onDataChange={handleDataChange}
view={view}
onViewChange={handleViewChange}
date={date}
onDateChange={handleDateChange}
editable={true}
timezone={timezone}
modelFields={customModelFields}
group={{
resources: ["Rooms", "Persons"],
orientation,
}}
resources={[
{
name: "Rooms",
data: [
{
text: "Meeting Room 101",
value: 1,
},
{
text: "Meeting Room 201",
value: 2,
color: "#FF7272",
},
],
field: "RoomID",
valueField: "value",
textField: "text",
colorField: "color",
},
{
name: "Persons",
data: [
{
text: "Peter",
value: 1,
color: "#5392E4"
},
{
text: "Alex",
value: 2,
color: "#54677B",
},
],
multiple:false,
field: "PersonIDs",
valueField: "value",
textField: "text",
colorField: "color"
},
]}
ref={MyScheduler}
>
<TimelineView />
<DayView />
<WeekView />
<MonthView />
<AgendaView />
</Scheduler>
<hr />
<Grid data={Griddata} rowRender={GridRowRender}>
<GridColumn field="taskID" />
<GridColumn field="title" />
</Grid>
</div>
);
};
export default Schedule
Ive tired to clear the usestate of the dragItem, clear the listeners but nothing changed.
I was adding a new event listener on every render. Thank you so much Konrad!