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 Matthew,
Yes, we can able to drag and drop from one component to another. Right now we
are facing an issue on sample side. We have logged the below bug report for the
case and the fix will be included in our biweekly release on end of
August 2019.
https://www.syncfusion.com/feedback/8223/getcelldetails-public-method-is-not-working
Regards,
Balaji
Hi Matthew,Thank you for the patienceWe have achieved your requirement “Drag and Drop event from external source to scheduler” and the sample can be downloaded from the following link.Please try out the above sample and confirm whether it comes to close your requirement.
Regards,Balaji
|
@using Newtonsoft.Json;
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Schedule
@using Syncfusion.EJ2.Blazor.DropDowns
<div id="waiting-list" style="display:flex;width:100%;">
@foreach (var data in WaitingListData)
{
<div class="drop-item">
@data.Name
</div>
}
</div>
<div class="row">
<div class="col-lg-8 e-droppable">
<EjsSchedule ID="schedule" @ref="ScheduleRef" TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2018, 5, 5))">
<ScheduleGroup Resources="@GroupData"></ScheduleGroup>
<ScheduleResources>
<ScheduleResource DataSource="@Consultants" Field="ConsultantID" Title="Consultant" Name="Consultants" TextField="text" IdField="id" ColorField="color"></ScheduleResource>
</ScheduleResources>
<ScheduleEventSettings DataSource="@DataSource">
</ScheduleEventSettings>
</EjsSchedule>
</div>
</div>
@code{
// Reference for Schedule
EjsSchedule<AppointmentData> ScheduleRef;
[Inject]
IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeAsync<string>("renderList.onList", "waiting-list", "schedule");
}
public class EmployeeData
{
public int Id { get; set; }
public string Name { get; set; }
}
...
}
<style>
.drop-item {
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
z-index: 1;
width: 100px;
background: antiquewhite;
margin: 5px;
}
</style> |
|
window.renderList = {
onList: function (controlName) {
var dragElement = document.getElementById('waiting-list');
for (var i = 0; i < dragElement.childElementCount; i++) {
new ej.base.Draggable(dragElement.children[i],
{
clone: false,
dragArea: document.querySelector(".e-schedule"),
dragStart: function (e) { // Triggers while dragging of an element
e.bindEvents(e.dragElement);
},
enableTailMode: true,
cursorAt: { left: -30, top: -20 },
dragStop: function (e) { // Triggers while dropping of an element
if (e.target && e.target.classList.contains("e-work-cells")) {
var draggedElement = e.element;
draggedElement.remove();
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
var cellData = scheduleObj.getCellDetails(e.target); // To Get appointment data
scheduleObj.openEditor(cellData, "Add"); // To display editor window
}
},
});
}
}
} |
