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. Image for the cookie policy date

Create a new event by drag & drop from outside scheduler

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



6 Replies

BP Balaji Paramesvaran Syncfusion Team August 14, 2019 01:43 PM UTC

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



BP Balaji Paramesvaran Syncfusion Team September 10, 2019 12:07 PM UTC

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. 
Please try out the above sample and confirm whether it comes to close your requirement. 

Regards, 
Balaji 



MA Matthew replied to Balaji Paramesvaran September 11, 2019 12:08 PM UTC

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


NR Nevitha Ravi Syncfusion Team September 11, 2019 01:08 PM UTC

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 



AK Alagumeena Kalaiselvan Syncfusion Team February 19, 2020 11:22 AM UTC

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 


Kindly let us know, If you need further assistance 

Regards 
Alagumeena.K 



VM Vengatesh Maniraj Syncfusion Team February 20, 2020 05:21 AM UTC

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.  


Loader.
Live Chat Icon For mobile
Up arrow icon