We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi John,
Q1: When the grid row starts dragging, a "ghost" drag image follows the cursor, as desired. However, when the cursor moves outside of the dashboard panel, the "ghost" image goes away and it is difficult to tell that the drag operation is still in progress. How can I maintain that dragged image while over the schedule?
You can resolve this behavior by setting up the zIndex property to the calendar panel of the Dashboard as shown in the below code snippet.
[DragExample.html]
|
var dashboard = new ej.layouts.DashboardLayout({ panels: [ //CALENDAR { 'id': 'Panel2', 'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 0, content: '<div class="db-content" id="calendar"></div>', 'zIndex': 999 } ] }); dashboard.appendTo('#dashboard'); |
Q2: What is the best way to determine the Date of where the row was dropped in the Schedule? My gridRowDrop() method handles this, but it seems kludge.
Q3: How do I ensure that the data was dropped on the schedule and not somewhere else? The event seems to fire regardless
The best way to determine the date where the row dropped is to get the dropped cell data using the getCellDetails method by sending the dropped target cell to it as shown in the below code snippet. You can make sure the dropped target is Schedule by using the closest method with the Schedule selector as highlighted in the below code snippet.
[DragExample.html]
|
function gridRowDrop(event) { // Make sure the row dropped target is a Schedule element var scheduleElement = ej.base.closest(event.target, '.e-schedule .e-content-wrap'); if (scheduleElement && event.target && event.target.classList.contains('e-work-cells') && event.data) { var gridData = event.data; // Get the dropped cell date details using getCellDetails method var cellData = scheduleObj.getCellDetails(event.target); // Get the dropped cell resource details using getResourcesByIndex method var resourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex); var eventDataArr = []; for (var i = 0, len = gridData.length; i < len; i++) { var eventData = { Id: gridData[i].id, StartTime: cellData.startTime, EndTime: cellData.endTime, Subject: gridData[i].name, IsAllDay: cellData.isAllDay }; eventDataArr.push(eventData); gridObj.deleteRow(event.rows[i]); } scheduleObj.addEvent(eventDataArr); } } |
Q4: I also noticed that once you've added several events by dragging the employees to various dates in the above example, any edits that you make to one of them (e.g. dragging or changing the time with the mouse) will cause events to be duplicated or have the changes applied to multiple events for the same employee. What am I missing here?
Your reported behavior happens when the different appointments have the same Id value. So, we suggest you make sure each appointment has a unique Id value to avoid this behavior. You can get the unique Id value that is already not present on the Schedule dataSource with help of the getEventMaxID method of the Schedule. Refer to the below example we have used the getEventMaxID method to add a unique Id value to the appointment.
UG: https://ej2.syncfusion.com/javascript/documentation/schedule/how-to/quick-info-template/
API: https://ej2.syncfusion.com/javascript/documentation/api/schedule#geteventmaxid
Q5: If I do not specify a Id field in EventSettings, a guid is created for each item. However, after editing an item, the guid changes. Is that intentional?
Yes, the GUID present in the appointment data is intentional. We are using that for internal appointment processing. If you are performing CRUD operations with the Schedule we suggest you make sure each appointment has a unique Id value.
Regards,
Ravikumar Venkatesan
Thanks for your help and explanations. I tried adding the zIndex solution to the panel but it didn't make any difference. Below is a screen shot showing the drag image moving behind the panel. I tried multiple values for zIndex but nothing changed.
