Events in WPF Kanban Board

18 Nov 201818 minutes to read

This section describes the events raised by the SfKanban control for card interactions, drag-and-drop operations, and column generation.

The snippets in this document use the kanban: prefix for the Syncfusion namespace. Make sure the following namespace mappings are declared on the root element: xmlns:kanban="clr-namespace:Syncfusion.UI.Xaml.Kanban;assembly=Syncfusion.SfKanban.WPF" and xmlns:local="clr-namespace:YourNamespace".

CardTapped

This event is triggered when you click (or tap) on a card. The KanbanDragEventArgs argument contains the following information:

Command

The CardTappedCommand property is used to associate a command with the control. This property is most often set with the MVVM pattern to bind callbacks back into the ViewModel.

CommandParameter

The CardTappedCommandParameter property is used to set the parameter reference, based on which the event argument is shown.

The default value of CardTappedCommandParameter is null.

CardDoubleTapped

The CardDoubleTapped event is triggered when you double-click (or double-tap) on a card. The KanbanDoubleTappedEventArgs argument contains the following information:

ColumnDragStarting

The ColumnDragStarting event occurs when a column begins to be dragged. The KanbanColumnDragStartingEventArgs argument contains the following details:

  • Column - Returns the source column that is being dragged.
  • ColumnIndex - Returns the index of the dragged column within the Kanban column collection.
  • Cancel - Determines whether the column drag operation should be canceled.
<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 AllowColumnReorder="True"
                 ColumnDragStarting="OnKanbanColumnDragStarting">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDragStarting += this.OnKanbanColumnDragStarting;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });
using Syncfusion.UI.Xaml.Kanban;

private void OnKanbanColumnDragStarting(object sender, KanbanColumnDragStartingEventArgs e)
{
    var column = e.Column;
    int columnIndex = e.ColumnIndex;
}
using System.Collections.ObjectModel;
using Syncfusion.UI.Xaml.Kanban;

namespace GettingStarted
{
    public class ViewModel
    {
        public ObservableCollection<KanbanModel> TaskDetails { get; set; }

        public ViewModel()
        {
            this.TaskDetails = new ObservableCollection<KanbanModel>();
            this.GetTaskDetails();
        }

        private void GetTaskDetails()
        {
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "Crosshair label template not visible in WPF", Category = "Open", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new string[] { "New control" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
        }
    }
}

ColumnDragOver

The ColumnDragOver event occurs when a column is being dragged over another column. The KanbanColumnDragOverEventArgs argument contains the following details:

  • SourceColumn - Returns the column where the drag operation originated.
  • CurrentColumn - Returns the current column over which the dragged column is positioned.
  • PreviousColumnIndex - Returns the previous column index before entering the current column.
  • CurrentColumnIndex - Returns the current column index over which the dragged column is positioned.
<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 AllowColumnReorder="True"
                 ColumnDragOver="OnKanbanColumnDragOver">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDragOver += this.OnKanbanColumnDragOver;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });
using Syncfusion.UI.Xaml.Kanban;

private void OnKanbanColumnDragOver(object sender, KanbanColumnDragOverEventArgs e)
{
    var sourceColumn = e.SourceColumn;
    var currentColumn = e.CurrentColumn;
    int previousColumnIndex = e.PreviousColumnIndex;
    int currentColumnIndex = e.CurrentColumnIndex;
}
using System.Collections.ObjectModel;
using Syncfusion.UI.Xaml.Kanban;

namespace GettingStarted
{
    public class ViewModel
    {
        public ObservableCollection<KanbanModel> TaskDetails { get; set; }

        public ViewModel()
        {
            this.TaskDetails = new ObservableCollection<KanbanModel>();
            this.GetTaskDetails();
        }

        private void GetTaskDetails()
        {
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "Crosshair label template not visible in WPF", Category = "Open", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new string[] { "New control" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
        }
    }
}

ColumnDrop

The ColumnDrop event occurs when a dragged column is dropped into a new position. The KanbanColumnDropEventArgs argument contains the following details:

<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 AllowColumnReorder="True"
                 ColumnDrop="OnKanbanColumnDrop">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDrop += this.OnKanbanColumnDrop;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });
using Syncfusion.UI.Xaml.Kanban;

private void OnKanbanColumnDrop(object sender, KanbanColumnDropEventArgs e)
{
    var sourceColumn = e.SourceColumn;
    int previousColumnIndex = e.PreviousColumnIndex;
    int targetColumnIndex = e.TargetColumnIndex;
    var targetColumn = e.TargetColumn;
}
using System.Collections.ObjectModel;
using Syncfusion.UI.Xaml.Kanban;

namespace GettingStarted
{
    public class ViewModel
    {
        public ObservableCollection<KanbanModel> TaskDetails { get; set; }

        public ViewModel()
        {
            this.TaskDetails = new ObservableCollection<KanbanModel>();
            this.GetTaskDetails();
        }

        private void GetTaskDetails()
        {
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "Crosshair label template not visible in WPF", Category = "Open", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new string[] { "New control" } });
            this.TaskDetails.Add(new KanbanModel() { Title = "WPF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new string[] { "Bug Fixing" } });
        }
    }
}

CardDragStart

This event is triggered when you start to drag a card. The KanbanDragStartEventArgs argument contains the following information:

  • IsCancel - Used to cancel the drag action.
  • SelectedCard - Used to get the underlying model of the card.
  • KeepCard - Determines whether to keep the dragged card in the source location until it is dropped in a new location. When it is true, the preview of the card will be created for dragging.
  • SelectedColumn - Used to get the source column of the card.
  • SelectedCardIndex - Used to get the index of the card in the source column.
  • SelectedColumnIndex - Used to get the index of the dragging card’s column.
  • SelectedRowIndex - Used to get the index of the dragging card’s row.

CardDragEnd

This event is triggered when the card drag operation is completed. The KanbanDragEndEventArgs argument contains the following information:

  • IsCancel - Used to cancel the drag action.
  • SelectedCard - Used to get the underlying model of the card.
  • SelectedColumn - Used to get the source column of the card.
  • SelectedCardIndex - Used to get the index of the card in the source column.
  • TargetKey - Used to get the category of the column where the card is going to be dropped.
  • TargetColumn - Used to get the current column which is the drop target for the card.
  • TargetCardIndex - Used to get the index of the card in the target column.
  • SelectedColumnIndex - Used to get the index of the dragging card’s column.
  • SelectedRowIndex - Used to get the index of the dragging card’s row.
  • TargetRowIndex - Used to get the target row index where the card is going to be inserted.
  • TargetColumnIndex - Used to get the target column index where the card is going to be inserted.

CardDragEnter

This event is triggered when a card enters a column while dragging. The KanbanDragEnterEventArgs argument contains the following information:

CardDragLeave

This event is triggered when a card leaves a column while dragging. The KanbanDragLeaveEventArgs argument contains the following information:

CardDragOver

This event is triggered when a card is dragged to a new index within a column. The KanbanDragOverEventArgs argument contains the following information:

ColumnsGenerated

This event is raised after the columns are generated automatically. You can access the auto-generated columns using the ActualColumns property of SfKanban.

ColumnGenerated

This event is triggered for each column as it is generated. The KanbanColumnGeneratedEventArgs argument contains the following information:

  • Columns - Used to get the generated columns.
  • IsCancel - Used to cancel the generated column from being added to the SfKanban.
  • CurrentColumn - Used to get the current generated column.