Drag and Drop Event Find SOurce and Target Column

[Tobias Hammermann]

Hi,

Iam trying to catch the source and target column of a card which has been draggeg and dropped to another column. Within the "DragStart" event, Iam able to find the source column, but for the target column it doesnt find the particular column.

<SfKanban @ref="KanbanBoard" AllowDragAndDrop="true" ID="vertical" Width="1600px" Height="720px" TValue="SupplierStateModel" KeyField="SupplierState" DataSource="SupplierStateModels">

            <KanbanEvents TValue="SupplierStateModel"

                      DragStop="@DragStopHandler"

                      DragStart="@DragStartHandler">

            </KanbanEvents>

            <KanbanColumns>

                <KanbanColumn HeaderText="Interested" KeyField="@(new List<string>() {"Interested"})"></KanbanColumn>

                <KanbanColumn HeaderText="Product Fit Assessed" KeyField="@(new List<string>() {"Product Fit Assessed"})"></KanbanColumn>

                <KanbanColumn HeaderText="General Fit Assessed" KeyField="@(new List<string>() {"General Fit Assessed"})"></KanbanColumn>

                <KanbanColumn HeaderText="Approach & Conditions Agreed" KeyField="@(new List<string>() {"Approach & Conditions Agreed"})"></KanbanColumn>

                <KanbanColumn HeaderText="Product selected" KeyField="@(new List<string>() {"Product selected"})"></KanbanColumn>

                <KanbanColumn HeaderText="Product picture taken" KeyField="@(new List<string>() {"Product picture taken"})"></KanbanColumn>

                <KanbanColumn HeaderText="Products documented & reviewed" KeyField="@(new List<string>() {"Products documented & reviewed"})"></KanbanColumn>

                <KanbanColumn HeaderText="Active supplier" KeyField="@(new List<string>() {"Active supplier"})"></KanbanColumn>

            </KanbanColumns>

            <KanbanCardSettings HeaderField="SupplierName" ContentField="Location"></KanbanCardSettings>

        </SfKanban>

This is working

 public async void DragStartHandler(Syncfusion.Blazor.Kanban.DragEventArgs<SupplierStateModel> args)

    {

        var sourceColumn = await KanbanBoard.GetTargetDetailsAsync(args.Left, args.Top);

        StartColumn = sourceColumn.ColumnKeyField;

        SelectedSupplier = args.Data.FirstOrDefault() ?? new SupplierStateModel();

    }

This is not working

 public async void DragStopHandler(Syncfusion.Blazor.Kanban.DragEventArgs<SupplierStateModel> args)

    {

        var targetColumn = await KanbanBoard.GetTargetDetailsAsync(args.Left, args.Top);

        if (targetColumn == null)

        {

            StartColumn = "";

            SelectedSupplier = new();

        }

        if (targetColumn != null)

        {

            DroppedColumn = targetColumn.ColumnKeyField;

            var relevantSupplier = Suppliers.FirstOrDefault(x => x.SupplierName == SelectedSupplier.SupplierName);

            if (relevantSupplier != null)

            {

                var response = await SupplierService.ChangeSupplierState(relevantSupplier, DroppedColumn);

            }

        }

    }

I get the top and left value from the parameter but the method " GetTargetDetailsAsync" can not always find the related column. Sometimes it does find the column sometimes it doesn`t. I couldn`t find any pattern when is working or not.

Thanks and best regards

[Buvana Sathasivam]

Hi Tobias,

Greetings from Syncfusion support.

When the cursor dropped position on any one card or dropped clone element, the GetTargetDetails public method returned information. If the cursor was placed in between the cards or empty space in a cell, this method returned a null value.

We suggest getting the current card details using the DragEventArgs arguments data. Please find the below code and sample for your reference.

private async void DragStart(Syncfusion.Blazor.Kanban.DragEventArgs<TasksModel> args)

    {

        var StartColumn = args.Data[0].Status;

    }

 

    private async void DragStop(Syncfusion.Blazor.Kanban.DragEventArgs<TasksModel> args)

    {

        var targetColumn = args.Data[0].Status;

            }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Net6Server_-_Copy_(2)_-_Copy1734013867

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_GetTargetDetailsAsync_System_Double_System_Double_

Regards,

Buvana S

[Tobias Hammermann]

Hi Buvana,

this works perfectly - thank you very much. Have you any recommendation if I want to interrupt the dragging / DragStop method to open for example a dialog and continue as soon as the dialog is closed?

Thanks and best regards,

Tobias 

[Buvana Sathasivam]

Hi Tobias,

The DragStop event is able to open the SfDialog component. However, you are unable to hold the execution until the dialog closes. It is a synchronous process.

Regards,

Buvana S