Triggering a method in ViewModel when cards are dragged to a different column.

[Unknown]

Hi, 

I am using MVVM to set up SfKanban. In my ViewModel, I have an ObservableCollection of KanbanModel, this is binding to the Kanban in my View. When I drag an item from one column to another I need it to trigger a method in my ViewModel.

[Devakumar Dhanapoosanam]

Hi Kevin Hilty, 

 

You can achieve your requirement by binding the CardDragEnter event of Kanban which is triggering when entering a column as per in the below code example, 

 

… 

<kanban:SfKanban x:Name="kanban"  

                 ItemsSource="{Binding Tasks}"> 

    <i:Interaction.Triggers> 

        <i:EventTrigger EventName="CardDragEnter"> 

            <i:InvokeCommandAction Command="{Binding CardDragEnter}"  

                            CommandParameter="{Binding ElementName=kanban}"/> 

        </i:EventTrigger> 

    </i:Interaction.Triggers>     

… 

</kanban:SfKanban> 

 

public class TaskDetails 

{ 

    private ICommand cardDragEnter; 

    public ICommand CardDragEnter 

    { 

        get 

        { 

            return cardDragEnter ?? (cardDragEnter = new RelayCommand(CanExecute)); 

        } 

    } 

 

    public void CanExecute(object parameter) 

    { 

        //here you can invoke the view model method based on your requirement  

        MyMethod(); 

        … 

    } 

 

    private void MyMethod() 

    { 

 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173475/ze/Sample-WPF1424742095.zip  

 

Please refer the below link for more details 

https://help.syncfusion.com/wpf/kanban-board/events?#carddragenter 

https://help.syncfusion.com/wpf/kanban-board/events?#carddragend  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D 

[Unknown]

Thank you, This is very helpful. I do have one more question.

How do I get the TargetColumn or the Category of the target column for that CardDragEnter event?

[Yuvaraj Palanisamy]

Hi Kevin Hilty, 

 

You can get the target column or category of target column by using the EventToCommnadBehavior to pass the event args value as per the below code example. 

 

CodeSnippet: 

<behaviours:Interaction.Behaviors> 

    <local:EventToCommandBehavior Command="{Binding DragCommand }"   

                                  Event="CardDragEnter" PassArguments="True" /> 

</behaviours:Interaction.Behaviors> 

 

public ActionCommand<KanbanDragEnterEventArgs> DragCommand { get; private set; } 

 

this.DragCommand = new ActionCommand<KanbanDragEnterEventArgs>(OnCardDrag); 

 

private void OnCardDrag (KanbanDragEnterEventArgs e) 

 { 

     var targetColumn = e.CurrentColumn; 

     var targetCagtegory = (e.CurrentColumn as KanbanColumn).Categories; 

     var selectedColumn = e.SelectedColumn; 

     var selectedCard = e.SelectedCard; 

 } 

 

Also, we have attached the complete sample for your reference. Please find the sample from the below link and let us know if you have any concern.  

  

Link: https://www.syncfusion.com/downloads/support/forum/173475/ze/Kanban_Event_to_behavior-844685760   

  

Regards, 

Yuvaraj. 

[Unknown]

My EventToCommandBehavior is getting an error: the type 'local:EventToCommandBehavior' was not found...

I am trying to do this with Prism, I am not sure if that is the problem.

[Yuvaraj Palanisamy]

Hi Kevin Hilty,

 

We will validate and update the completed details on 16^th March, 2022. 

Regards, 

Yuvaraj. 

[Devakumar Dhanapoosanam]

Hi Kevin Hilty, 

 

We have checked the reported error with prism library, and it was working proper at our end as per the below code example. 

 

xmlns:i="http://schemas.microsoft.com/xaml/behaviors" 

xmlns:prism="http://prismlibrary.com/"
… 

<kanban:SfKanban x:Name="kanban"  

                 ItemsSource="{Binding Tasks}"> 

    <i:Interaction.Triggers> 

        <i:EventTrigger EventName="CardDragEnter"> 

            <prism:InvokeCommandAction Command="{Binding DragCommand}"/> 

        </i:EventTrigger> 

    </i:Interaction.Triggers>
… 

</kanban:SfKanban> 

 

public DelegateCommand<KanbanDragEnterEventArgs> DragCommand { get; private set; } 

 

… 

 

DragCommand = new DelegateCommand<KanbanDragEnterEventArgs>(OnCardDrag); 

 

private void OnCardDrag(KanbanDragEnterEventArgs e) 

{ 

    var targetColumn = e.CurrentColumn; 

    var targetCagtegory = (e.CurrentColumn as KanbanColumn).Categories; 

    var selectedColumn = e.SelectedColumn; 

    var selectedCard = e.SelectedCard; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173475/ze/173475493978683.zip  

 

If you are still facing any issue, could you please share more details or complete code snippet or if possible, share the issue reproducing sample by modifying the attached sample which will be helpful us to replicate the issue to provide the solution at earliest. 

 

Regards, 

Devakumar D 

[Unknown]

Thank you for your time, I have found a different way to make it work. My problems have been resolved.

[Yuvaraj Palanisamy]

Hi Kevin Hilty, 

 

Thanks for your update. We are glad to know that you have resolved the issue. 

 

Regards, 

Yuvaraj.