Blazor TaskBoard Overview

Updated on May 20, 2026

The Telerik TaskBoard component for Blazor, also known as a Kanban Board, displays task and progress information as cards in a column layout. Users can drag and drop Cards to update their status, or create, edit, and delete Cards and Columns. The TaskBoard component also supports flexible data binding, column reordering, templates, custom toolbar tools, and various events.

Creating Blazor TaskBoard

1. Add a <TelerikTaskBoard> tag to your Razor file.
2. Set the CardData parameter to an IEnumerable<TItem> of your Card objects. The TaskBoard automatically recognizes Card property names like Title, Description, Status and a few others.
3. Set the ColumnData parameter to an IEnumerable<TColumn> of your Column objects. The TaskBoard automatically recognizes Column property names like Title, Index, Status and a few others.
4. Set Card Status values that match the desired Column Status values.
5. (optional) Set TItem and TColumn to your Card and Column model types to simplify the event definition syntax.
6. Subscribe to the OnCardMove event to update the CardData collection when users drag Cards across different Columns.
7. (optional) Set the TaskBoard Priorities parameter to a List<TaskBoardCardPriority>. Set Card Priority values that match the desired TaskBoardCardPriority Value.
8. (optional) Define TaskBoardCardSettings and TaskBoardColumnSettings, for example, a Column Width.

<TelerikTaskBoard CardData="@TaskBoardCards"
                  ColumnData="@TaskBoardColumns"
                  Height="96vh"
                  OnCardMove="@OnTaskBoardCardMove"
                  Priorities="@TaskBoardPriorities"
                  TColumn="@TaskBoardColumn"
                  TItem="@TaskBoardCard">
    <TaskBoardSettings>
        <TaskBoardCardSettings Buttons="@TaskBoardCardButtons.None" />
        <TaskBoardColumnSettings Buttons="@TaskBoardColumnButtons.None" Width="240px" />
    </TaskBoardSettings>
</TelerikTaskBoard>

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

    private List<TaskBoardCardPriority> TaskBoardPriorities { get; set; } = new()
        {
            new() { Text = "Low", Value = "low", Color = "var(--kendo-color-success)" },
            new() { Text = "Normal", Value = "normal", Color = "var(--kendo-color-info)" },
            new() { Text = "Medium", Value = "medium", Color = "var(--kendo-color-warning)"},
            new() { Text = "High", Value = "high", Color = "var(--kendo-color-error)" }
        };

    private int LastId { get; set; }

    private void OnTaskBoardCardMove(TaskBoardCardMoveEventArgs<TaskBoardCard> args)
    {
        args.Item.Index = args.NewIndex;
        args.Item.Status = args.NewStatus;
    }

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

        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++)
        {
            int cardId = ++LastId;
            string cardStatus = $"Status {(i % columnsCount) + 1}";
            int cardIndex = TaskBoardCards.Where(c => c.Status == cardStatus).Count();
            
            TaskBoardCards.Add(new TaskBoardCard()
            {
                Description = $"Description {i}",
                Id = cardId,
                Index = cardIndex,
                Priority = TaskBoardPriorities[i % TaskBoardPriorities.Count].Value,
                Status = cardStatus,
                Title = $"Card {i}"
            });
        }

        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; }
    }
}

Cards and Columns

The main UI elements in the Blazor TaskBoard are Cards and Columns.

Drag and Drop

The UX milestone of the TaskBoard component is the user ability to drag Cards from one column to another. Users can also reorder Columns, which is less common and disabled by default.

ToolBar

The TaskBoard ToolBar allows you to add built-in and custom tools above the Columns. The built-in tools include the ability to add new Columns or search Cards by their title or description.

Editing

Depending on the TaskBoard configuration, users can create, update, and delete Cards and Columns.

Templates

The TaskBoard templates allow you to customize the content of Cards, Column headers, and Card edit form.

Events

The TaskBoard exposes a variety of Card and Column related events that enable the app to detect and react to user actions.

TaskBoard API

Consult the TaskBoard API Reference to see all available component parameters, methods, and events.

Use @ref to add a reference to the component instance and use the TaskBoard methods. Note that the TaskBoard is a generic component. Its Card and Column model types must be part of the component reference definition.

The earliest possible time to use Blazor component references is in OnAfterRender or OnAfterRenderAsync.

RAZOR

<TelerikTaskBoard @ref="@TaskBoardRef">

@code {
    private TelerikTaskBoard<TaskBoardCard, TaskBoardColumn>? TaskBoardRef;
}

Next Steps

• Bind TaskBoard to Cards and Columns
• Learn about TaskBoard drag and drop

See Also

• TaskBoard Live Demos
• TaskBoard API Reference