Create a new event by drag & drop from outside scheduler

[Matthew]

Hi,

How would I go about creating a new event by dragging and dropping from control external to the scheduler.

For example I would want to drag and drop a person from a list into a slot on the week view in the scheduler and add an event with the start time of the slot dropped into, I would set the end time based on a default of adding 1 hour to the start time.

So I have a list of names in a control on the page, I start the drag operation by creating a new event object with some of the details required (name), when I drop into a slot on the scheduler I would complete the required details with the start time of the slot dropped into and set the end time, then add that event to my datasource.

I can see documentation to acheive this with ASP.NET Core, but how do I do it in Blazor? Is it possible? Is it a feature on the roadmap?

The ASP.NET Core example I would like to emulate is https://ej2.syncfusion.com/aspnetcore/Schedule/ExternalDragDrop#/material

Thanks

[Balaji Paramesvaran]

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

[Balaji Paramesvaran]

Hi Matthew, 

Thank you for the patience 

We have achieved your requirement “Drag and Drop event from external source to scheduler” and the sample can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146676/ze/ScheduleSample-484205444  

Please try out the above sample and confirm whether it comes to close your requirement. 

Regards, 

Balaji 

[Matthew]

Hi Matthew, 

Thank you for the patience 

We have achieved your requirement “Drag and Drop event from external source to scheduler” and the sample can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146676/ze/ScheduleSample-484205444  

Please try out the above sample and confirm whether it comes to close your requirement. 

Regards, 

Balaji 

Hi Balaji,

Many thanks for looking into this for me.

The sample you have provided works exactly as I need. I now need to integrate with my app and test again (I have custom data and I have implemented my own popup).

Looking good though

Thanks again

[Nevitha Ravi]

Hi Matthew, 

You are most Welcome. 

We are glad that our solution fulfills your requirement and please let us know if you need any further assistance. 

Regards, 

Nevitha 

[Alagumeena Kalaiselvan]

Hi Aurelie, 

Thanks for your update! 

We have checked your query “How to display treeview in horizontal manner while using external drag and drop of scheduler” and regret to let you know it is not feasible to display elements in horizontal orientation for Treeview and Listbox components. So, we suggest you bind the drag and drop actions on HTML elements using our essential JS2 draggable library. Here, we have prepared a sample based on your requirement and refer below steps 

Step 1: “Define your custom elements in the `~/index.razor` file” 

@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> 

Step 2:  Refer “~/drag.js” file and place the below code to handle drag and drop over the custom element 

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 

                        } 

                    }, 

                }); 

        } 

    } 

} 

Also, you can download this sample from the following link 

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleComponent1695592019  

Kindly let us know, If you need further assistance 

Regards 

Alagumeena.K 

[Vengatesh Maniraj]

Hi Aurelie,  

 

Thanks for the update. 

 

We are happy that you have found the solution. 

 

Please let us know if you need any other assistance. 

 

Regards, 

Vengatesh.