Custom validation for Kanban cards

[Keiran]

Hi, 

Is is possible to implement custom validation based on the properties of the card itself?

Using the image below as an example - if the user tried to drag Task 8 into the swimlane above, could I include some logic like:

• Task 8 cannot be placed into the same swimlane as Task 2, or
• Task 8 cannot be placed into Janet Leverling's swimlane

Thanks,

Keiran

[Ravikumar Venkatesan]

Hi Keiran, 

Greetings from Syncfusion support. 

We have validated your requirement “Is it possible to implement custom validation based on the properties of the card itself?” at our end. We have achieved your requirement with the help of the DragStart and DragStop events of the Kanban like the below code. We can prevent the card drop by setting up the args.Cancel = true in the DragStop event. Currently, we are facing an issue with the DragStop event. We have logged the defect report at our end and the fix will be included in our weekly patch release which is scheduled to be rolled out by mid of October 2020. You can track this defect status in the below feedback link. We appreciate your patience. Until the issue is fixed at our end, we suggest you to comment on the args.Cancel = true line in the DragStop event. 

@page "/" 

 

@using Syncfusion.Blazor.Kanban 

@using System.Diagnostics  

 

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks"> 

    <KanbanEvents TValue="TasksModel" DragStart="@onDragStart" DragStop="@onDragStop"></KanbanEvents> 

    <KanbanColumns> 

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

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

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

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

    </KanbanColumns> 

    <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings> 

    <KanbanSwimlaneSettings KeyField="Assignee" AllowDragAndDrop="true"></KanbanSwimlaneSettings> 

</SfKanban> 

 

@code { 

    public string assignee; 

    public string id; 

 

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

    { 

        id = args.Data[0].Id; 

        assignee = args.Data[0].Assignee; 

    } 

 

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

    { 

        if(args.Data[0].Assignee != assignee) 

        { 

            Debug.WriteLine(id + " Cannot be plaaced into " + args.Data[0].Assignee + " Swimlane"); 

            // We can prevent the card drop action by setting up args.Cancel = true. 

            //args.Cancel = true; 

        } 

    } 

} 

Feedback: https://www.syncfusion.com/feedback/18700/setting-up-args-cancel-true-in-the-dragstop-event-continuously-running-the-spinner 

Sample: https://www.syncfusion.com/downloads/support/forum/158598/ze/syncfusion-blazor-web-kanban-sample1710461326 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Keiran]

Hi Ravikumar,

Thank you for your quick and helpful response. I'll try what you've suggested.

Keiran

[Nevitha Ravi]

Hi Keiran, 

You are most welcome 😊 . Please get back to us for further assistance. 

Regards, 

Nevitha 

[Keiran]

Hi Nevitha,

Do you have any updates regarding the args.cancel bug? 

Does it also apply to drag-and-drop on columns as well as swimlanes?

Thanks,

Keiran

[Ravikumar Venkatesan]

Hi Keiran, 

  

Thanks for the update. 

  

  

Do you have any updates regarding the args.cancel bug? 

  

We have resolved the reported problem in one of our previous releases. So, we can use args.cancel in DragStop event. 

  

  

Does it also apply to drag-and-drop on columns as well as swimlanes? 

  

We have validated your above query at our end. The code that we have previously shared with you only prevent the drag action between the different swimlanes. We can prevent the drag action between the different columns with the help of the code shown below. We have prepared a sample for your reference and it can be available below. 

  

[Index.razor] 

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

    { 

        status = args.Data[0].Status; 

    } 

  

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

    { 

        if(args.Data[0].Assignee != assignee || args.Data[0].Status != status) 

        { 

            // Preventing the drag action between the columns 

           args.Cancel = true; 

        } 

    } 

  

Sample: https://www.syncfusion.com/downloads/support/forum/158598/ze/syncfusion-blazor-kanban-prevent-drag-action854230067 

  

Kindly try the above sample and get back to us if you need any further assistance. 

  

Regards, 

Ravikumar Venkatesan