New to Telerik UI for Blazor? Start a free 30-day trial

TaskBoard Events

Updated on May 12, 2026

This article describes the available events in the Telerik TaskBoard for Blazor:

OnCardClick
OnCardCreate
OnCardDelete
OnCardMove
OnCardUpdate
OnColumnCreate
OnColumnDelete
OnColumnReorder
OnColumnUpdate
SelectedCardChanged

Most TaskBoard event arguments are generic and depend on the two TaskBoard @typeparam types TItem and TColumn. To overcome a Blazor framework limitation and define events with a simpler syntax, you can set TItem and TColumn explicitly as in the code snippets below.

OnCardClick

The TaskBoard OnCardClick event fires when the user:

Clicks or taps a Card.
Hits Enter while a Card is focused.

The event handler receives a generic TaskBoardCardClickEventArgs<TItem> argument.

OnCardClick fires after SelectedCardChanged.

Using the TaskBoard OnCardClick event

RAZOR

<TelerikTaskBoard OnCardClick="@OnTaskBoardCardClick"
                  TItem="@TaskBoardCard" />

@code {
    private void OnTaskBoardCardClick(TaskBoardCardClickEventArgs<TaskBoardCard> args)
    {
        TaskBoardCard clickedCard = args.Item;
    }
}

Also see the runnable example below.

OnCardCreate

The TaskBoard OnCardCreate event fires when the user submits a new Card. The event handler receives a generic TaskBoardCardCreateEventArgs<TItem> argument.

If the new Card should not be added, the event can be cancelled. Otherwise, the app must set a unique identifier and add the new Card to CardData.

RAZOR

<TelerikTaskBoard CardData="@TaskBoardCards"
                  OnCardCreate="@OnTaskBoardCardCreate"
                  TItem="@TaskBoardCard" />

@code {
    private List<TaskBoardCard> TaskBoardCards { get; set; } = new();

    private void OnTaskBoardCardCreate(TaskBoardCardCreateEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.Item.Id = 123;

        TaskBoardCards.Add(args.Item);
    }
}

Also see the runnable example below.

OnCardDelete

The TaskBoard OnCardDelete event fires when the user clicks a Card delete button or when the app executes the DeleteCardAsync() method of the TaskBoardCardTemplateContext. The event handler receives a generic TaskBoardCardDeleteEventArgs<TItem> argument.

If the Card should not be deleted, the event can be cancelled. Otherwise, the app must remove the Card item from CardData.

Using the TaskBoard OnCardDelete event

RAZOR

<TelerikTaskBoard CardData="@TaskBoardCards"
                  OnCardDelete="@OnTaskBoardCardDelete"
                  TItem="@TaskBoardCard" />

@code {
    private List<TaskBoardCard> TaskBoardCards { get; set; } = new();

    private void OnTaskBoardCardDelete(TaskBoardCardDeleteEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        TaskBoardCards.Remove(args.Item);
    }
}

Also see the runnable example below.

OnCardMove

The TaskBoard OnCardMove event fires when the user drags and drops a Card to another position or another column. The event handler receives a generic TaskBoardCardMoveEventArgs<TItem> argument.

If the dragged Card should not be moved, the event can be cancelled. Otherwise, the app must update the Card Index and Status values.

Using the TaskBoard OnCardMove event

RAZOR

<TelerikTaskBoard OnCardMove="@OnTaskBoardCardMove"
                  TItem="@TaskBoardCard" />

@code {
    private void OnTaskBoardCardMove(TaskBoardCardMoveEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.Item.Index = args.NewIndex;
        args.Item.Status = args.NewStatus;
    }
}

Also see the runnable example below.

OnCardUpdate

The TaskBoard OnCardUpdate event fires when the user submits changes to an existing Card. The event handler receives a generic TaskBoardCardUpdateEventArgs<TItem> argument, which exposes a cloned modified copy of the edited Card.

If the Card should not be modified, the event can be cancelled. Otherwise, the app must apply the changes to the original Card item in CardData.

Using the TaskBoard OnCardUpdate event

RAZOR

<TelerikTaskBoard OnCardUpdate="@OnTaskBoardCardUpdate"
                  TItem="@TaskBoardCard" />

@code {
    private void OnTaskBoardCardUpdate(TaskBoardCardUpdateEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Description = args.Item.Description;
        args.OriginalItem.Title = args.Item.Title;
    }
}

Also see the runnable example below.

OnColumnCreate

The TaskBoard OnColumnCreate event fires when the user clicks the TaskBoardToolBarAddColumnTool in the TaskBoard ToolBar. The event handler receives a generic TaskBoardColumnCreateEventArgs<TColumn> argument that allows you to set Column properties. The new Column automatically displays in edit mode, so that the user can fill in the Title property.

If the new Column should not be added, the event can be cancelled. Otherwise, the app must add the new Column to ColumnData. Optionally, set a unique Status or the component will assign one automatically.

Using the TaskBoard OnColumnCreate event

RAZOR

<TelerikTaskBoard ColumnData="@TaskBoardColumns"
                  OnColumnCreate="@OnTaskBoardColumnCreate"
                  TColumn="@TaskBoardColumn" />

@code {
    private List<TaskBoardColumn> TaskBoardColumns { get; set; } = new();

    private void OnTaskBoardColumnCreate(TaskBoardColumnCreateEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        //args.Item.Status = "status-123";

        TaskBoardColumns.Add(args.Item);
    }
}

Also see the runnable example below.

OnColumnDelete

The TaskBoard OnColumnDelete event fires when the user clicks the DeleteColumn button in the Column header. The event handler receives a generic TaskBoardColumnDeleteEventArgs<TColumn> argument.

If the Column should not be deleted, the event can be cancelled. Otherwise, the app must remove the Column item from ColumnData. The app can also delete all Cards from the non-existent column or change their Status to move them to another column.

Using the TaskBoard OnColumnDelete event

RAZOR

<TelerikTaskBoard CardData="@TaskBoardCards"
                  ColumnData="@TaskBoardColumns"
                  OnColumnDelete="@OnTaskBoardColumnDelete"
                  TColumn="@TaskBoardColumn" />

@code {
    private List<TaskBoardColumn> TaskBoardColumns { get; set; } = new();

    private void OnTaskBoardColumnDelete(TaskBoardColumnDeleteEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        TaskBoardColumns.Remove(args.Item);

        // Optionally, delete or move all Cards from the column
        TaskBoardCards.RemoveAll(c => c.Status == args.Item.Status);
    }
}

Also see the runnable example below.

OnColumnReorder

The TaskBoard OnColumnReorder event fires when the user drags a column to another position. The event handler receives a generic TaskBoardColumnReorderEventArgs<TColumn> argument that exposes information about the dragged column and its old and new order index.

If the Column should not be moved, the event can be cancelled. Otherwise the reorder operation is successfully completed without additional coding.

Using the TaskBoard OnColumnReorder event

RAZOR

<TelerikTaskBoard ColumnReorderable="true"
                  OnColumnReorder="@OnTaskBoardColumnReorder"
                  TColumn="@TaskBoardColumn" />

@code {
    private void OnTaskBoardColumnReorder(TaskBoardColumnReorderEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        Console.WriteLine($"Reordered column {args.Item.Title} from index {args.OldIndex} to index {args.NewIndex}");
    }
}

Also see the runnable example below.

OnColumnUpdate

The TaskBoard OnColumnUpdate event fires when the user submits a new Column title from the built-in Column header UI. The event handler receives a generic TaskBoardColumnUpdateEventArgs<TColumn> argument.

If the Column title should not be modified, the event can be cancelled. Otherwise, the app must apply the changes to the original Column item.

Using the TaskBoard OnColumnUpdate event

RAZOR

<TelerikTaskBoard ColumnData="@TaskBoardColumns"
                  OnColumnUpdate="@OnTaskBoardColumnUpdate"
                  TColumn="@TaskBoardColumn" />

@code {
    private List<TaskBoardColumn> TaskBoardColumns { get; set; } = new();

    private void OnTaskBoardColumnUpdate(TaskBoardColumnUpdateEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Title = args.Item.Title;
    }
}

Also see the runnable example below.

SelectedCardChanged

The TaskBoard SelectedCardChanged event fires when the user selects a card. Use the event if you need to execute related custom logic. Make sure to update the value of the SelectedCard parameter in the event handler.

The event handler receives a Nullable<TItem> argument that is the newly selected Card.

SelectedCardChanged fires before OnCardClick.

RAZOR

<TelerikTaskBoard SelectedCard="@TaskBoardSelectedCard"
                  SelectedCardChanged="@TaskBoardSelectedCardChanged" />

@code {
    private TaskBoardCard? TaskBoardSelectedCard { get; set; }

    private void TaskBoardSelectedCardChanged(TaskBoardCard? newSelectedCard)
    {
        TaskBoardSelectedCard = newSelectedCard;
    }
}

Example

Using the TaskBoard events

<p>Last Event: @TaskBoardEventLog</p>

<TelerikTaskBoard CardData="@TaskBoardCards"
                  ColumnData="@TaskBoardColumns"
                  ColumnReorderable="true"
                  Height="600px"
                  OnCardCreate="@OnTaskBoardCardCreate"
                  OnCardClick="@OnTaskBoardCardClick"
                  OnCardDelete="@OnTaskBoardCardDelete"
                  OnCardMove="@OnTaskBoardCardMove"
                  OnCardUpdate="@OnTaskBoardCardUpdate"
                  OnColumnCreate="@OnTaskBoardColumnCreate"
                  OnColumnDelete="@OnTaskBoardColumnDelete"
                  OnColumnReorder="@OnTaskBoardColumnReorder"
                  OnColumnUpdate="@OnTaskBoardColumnUpdate"
                  SelectedCard="@TaskBoardSelectedCard"
                  SelectedCardChanged="@TaskBoardSelectedCardChanged"
                  TColumn="@TaskBoardColumn"
                  TItem="@TaskBoardCard">
    <TaskBoardToolBar>
        <TaskBoardToolBarAddColumnTool />
    </TaskBoardToolBar>
</TelerikTaskBoard>

@code {
    private List<TaskBoardCard> TaskBoardCards { get; set; } = new();
    private List<TaskBoardColumn> TaskBoardColumns { get; set; } = new();
    private TaskBoardCard? TaskBoardSelectedCard { get; set; }

    private string TaskBoardEventLog { get; set; } = string.Empty;

    private void OnTaskBoardCardCreate(TaskBoardCardCreateEventArgs<TaskBoardCard> args)
    {
        args.Item.Id = ++LastId;

        TaskBoardCards.Add(args.Item);

        TaskBoardEventLog = $"Added card {args.Item.Title}";
    }

    private void OnTaskBoardCardClick(TaskBoardCardClickEventArgs<TaskBoardCard> args)
    {
        TaskBoardEventLog = $"Clicked card {args.Item.Title}";
    }

    private void OnTaskBoardCardDelete(TaskBoardCardDeleteEventArgs<TaskBoardCard> args)
    {
        TaskBoardCards.Remove(args.Item);

        TaskBoardEventLog = $"Deleted card {args.Item.Title}";
    }

    private void OnTaskBoardCardMove(TaskBoardCardMoveEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.Item.Index = args.NewIndex;
        args.Item.Status = args.NewStatus;

        TaskBoardEventLog = $"Moved card {args.Item.Title} from index {args.OldIndex} to index {args.NewIndex} and from status {args.OldStatus} to status {args.NewStatus}";
    }

    private void OnTaskBoardCardUpdate(TaskBoardCardUpdateEventArgs<TaskBoardCard> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Description = args.Item.Description;
        args.OriginalItem.Title = args.Item.Title;

        TaskBoardEventLog = $"Updated card {args.Item.Title}";
    }

    private void OnTaskBoardColumnCreate(TaskBoardColumnCreateEventArgs<TaskBoardColumn> args)
    {
        TaskBoardColumns.Add(args.Item);

        TaskBoardEventLog = $"Added column {args.Item.Title}";
    }

    private void OnTaskBoardColumnDelete(TaskBoardColumnDeleteEventArgs<TaskBoardColumn> args)
    {
        TaskBoardColumns.Remove(args.Item);

        // Optionally, delete or move all Cards from the column
        string newCardStatus = TaskBoardColumns.FirstOrDefault()?.Status ?? string.Empty;
        TaskBoardCards.ForEach(c =>
        {
            if (c.Status == args.Item.Status)
            {
                c.Status = newCardStatus;
            }
        });

        TaskBoardEventLog = $"Deleted column {args.Item.Title}";
    }

    private void OnTaskBoardColumnReorder(TaskBoardColumnReorderEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        TaskBoardEventLog = $"Reordered column {args.Item.Title} from index {args.OldIndex} to index {args.NewIndex}";
    }

    private void OnTaskBoardColumnUpdate(TaskBoardColumnUpdateEventArgs<TaskBoardColumn> args)
    {
        //args.IsCancelled = true;

        args.OriginalItem.Title = args.Item.Title;

        TaskBoardEventLog = $"Updated column {args.Item.Title}";
    }

    private void TaskBoardSelectedCardChanged(TaskBoardCard newSelectedCard)
    {
        TaskBoardSelectedCard = newSelectedCard;

        TaskBoardEventLog = $"Selected card {newSelectedCard?.Title}";
    }

    private int LastId { get; set; }

    protected override void OnInitialized()
    {
        int columnsCount = 3;
        int cardsCount = 5;

        for (int i = 1; i <= columnsCount; i++)
        {
            int columnId = ++LastId;

            TaskBoardColumns.Add(new TaskBoardColumn()
            {
                Index = i - 1,
                Status = $"Status {columnId}",
                Title = $"Column {columnId}"
            });
        }

        for (int i = 1; i <= cardsCount; i++)
        {
            string cardStatus = $"Status {(i % columnsCount) + 1}";
            int cardIndex = TaskBoardCards.Where(c => c.Status == cardStatus).Count();
            int cardId = ++LastId;
            
            TaskBoardCards.Add(new TaskBoardCard()
            {
                Description = $"Description {cardId}",
                Id = cardId,
                Index = cardIndex,
                Status = cardStatus,
                Title = $"Card {cardId}"
            });
        }

        base.OnInitialized();
    }

    public class TaskBoardCard
    {
        public string Description { get; set; } = string.Empty;
        public int Id { get; set; }
        public int Index { get; set; }
        public string Priority { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
    }

    public class TaskBoardColumn
    {
        public TaskBoardColumnButtons? Buttons { get; set; }
        public bool Enabled { get; set; } = true;
        public int Index { get; set; }
        public string Status { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Width { get; set; } = string.Empty;
        public int? WipLimit { get; set; }
    }
}