How to Drag & Drop from Grid into Scheduler

[Uwe Hein]

Hi everybody,

   is there a sample on how to drag one row from a grid into a scheduler ? There is a sample on how to drag from a tree but I am not sure how to get the grid row data. Dragging between two grids seems to work without any events to call or data to prepare for the dragging operation.

   regards

     Uwe

[Nevitha Ravi]

Hi Uwe, 

Greetings from Syncfusion Support. 

We have prepared a sample to drag the data from Grid to Scheduler using RowDrop event of Grid which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/154384/ze/GridToSchedule-71493989  

…….               

  <SfGrid @ref="GridRef" DataSource="@Orders" AllowRowDragAndDrop="true" TValue="AppointmentData"> 

        <GridEditSettings AllowDeleting="true"></GridEditSettings> 

        <GridRowDropSettings TargetID="Schedueler"></GridRowDropSettings> 

        <GridEvents TValue="AppointmentData" RowDrop="OnRowDrop"></GridEvents> 

        <GridColumns> 

            <GridColumn Field=@nameof(AppointmentData.Id) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(AppointmentData.Subject) HeaderText="Subject" Width="135"></GridColumn> 

            <GridColumn Field=@nameof(AppointmentData.StartTime) HeaderText="Start Time" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

            <GridColumn Field=@nameof(AppointmentData.EndTime) HeaderText="End Time" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        </GridColumns> 

    </SfGrid> 

… 

    private void OnRowDrop(RowDragEventArgs<AppointmentData> args) 

    { 

        ScheduleObj.AddEvent(args.Data[0]); 

        GridRef.DeleteRecord("Id", args.Data[0]); 

    } 

Please try the sample and let us know if you need any further assistance. 

Regards, 

Nevitha 

[Uwe Hein]

Hi Nevitha,

  thank you for your sample !

Unfortunately it does not quite fit my needs. My grid data does not contain any date or time values. So I need to be able to to point to a date in the scheduler just like in the "tree to scheduler" sample. I think one of the problems is the args data of the RowDragEventArgs class in your sample. Amongst some other values args.target is null. So there seems to be no chance to point to a special date cell. 

Another issue is the cursor not changing when hovering over the schedule like in the tree sample.

Maybe some missing values in the RowDragEventArgs class have to be fixed.

Once again, thanks for your help - at the bottom you can find the event code of the tree to schedule sample which is just what I need with my "grid to schedule" problem.

    regards

     Uwe

public async void OnTreeViewDragStop(DragAndDropEventArgs args)
    {
        args.Cancel = true;

        object isScheduleSlot = await args.Target.GetAttribute("role");

        if (isScheduleSlot != null && isScheduleSlot.ToString() == "gridcell")
        {
            CellClickEventArgs cellData = await ScheduleRef.GetCellDetails(args.Target);

            var resourceDetails = await ScheduleRef.GetResourcesByIndex(cellData.GroupIndex);

            GroupData groupData = JsonConvert.DeserializeObject<GroupData>(JsonConvert.SerializeObject(resourceDetails.GroupData));

            Random rnd = new Random();

            int Id = rnd.Next(1000);

            ScheduleData.HospitalData eventData = new ScheduleData.HospitalData
            {
                Id = Id,
                Name = args.DraggedNodeData.Text,
                StartTime = cellData.StartTime,
                EndTime = cellData.EndTime,
                IsAllDay = cellData.IsAllDay,
                ConsultantID = groupData.ConsultantID,
                DepartmentID = groupData.DepartmentID
            };

            await ScheduleRef.OpenEditor(eventData, CurrentAction.Add, true);
        }
    }

[Alagumeena Kalaiselvan]

Hi Uwe, 

  

We have validated your reported query “Target element of RowDragEventArgs is null” and we are able to reproduce this issue at our end. Currently we will not send the DOM element in the Drag and Drop event argument to increase the performance of the DataGrid with reduced DOM activity. 

  

So we are validating the reported query further at our end and we will update you details by 26^th May 2020. Till then we appreciate your patience. 

  

Regards 

Alagumeena.K 

[Alagumeena Kalaiselvan]

Hi Uwe, 

 

Thanks for your patience. 

 

Query: “Maybe some missing values in the RowDragEventArgs class have to be fixed.” && “ cursor not changing when hovering over the schedule”  

Currently, we do not have support to drag and drop a record from Grid to schedule by passing Target value in Drag and Drop events of Grid. We have considered the requested query as a usability feature and logged improvement task “Support to drag and drop from Grid to schedule by sending Target element in RowDrop / RowDrag events” for the same. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. Fix for the usability feature will be included in any of our upcoming releases. 

   

You can also communicate with us regarding the open features any time using our Feature Report page.   

   

https://www.syncfusion.com/feedback/14691   

Till then we appreciate your patience. 

 

Regards 

Alagumeena.K