syncfusion-blazor-kanban

Implementing Syncfusion Blazor Kanban Component

When to Use This Skill

Use this skill when:

• Building Kanban boards or workflow management UIs in Blazor
• Implementing task/card management with column-based workflows
• Adding swimlane grouping to organize cards by assignee or category
• Enabling drag-and-drop card movement between columns
• Configuring WIP (Work-In-Progress) validation limits
• Customizing card appearance with templates
• Binding Kanban to local or remote data sources
• Integrating Kanban with external components (Schedule, TreeView)

Quick Start

1. Install NuGet Packages

dotnet add package Syncfusion.Blazor.Kanban
dotnet add package Syncfusion.Blazor.Themes

2. Register Service (Program.cs)

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. Add Imports (_Imports.razor)

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Kanban

4. Add Stylesheet and Script (index.html or App.razor)

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

5. Basic Kanban with Cards

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" 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="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Assignee { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Close", Summary = "Fix the issues reported in Safari browser.", Assignee = "Steven walker" },
    };
}

Navigation Guide

Topic	Reference File
Getting started (WebAssembly/Server/Web App)	getting-started.md
Data binding (local, remote, ExpandoObject, Observable)	data-binding.md
Column configuration	columns.md
Card customization	cards.md
Drag and drop (internal & external)	drag-and-drop.md
Swimlane grouping	swimlane.md
Card editing dialog	dialog.md
Events reference	events.md
Card sorting	sort.md
Workflow restrictions	workflow.md
WIP validation (MinCount/MaxCount)	validation.md
Styling and CSS classes	style.md
Accessibility (WCAG, keyboard navigation)	accessibility.md
Localization and RTL	localization.md
Tooltips	tooltip.md
Responsive mode	responsive-mode.md
Height and width dimensions	dimensions.md

Common Patterns

Kanban with Swimlane

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

Kanban with WIP Validation

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() {"Open"})" MinCount="2"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})" MaxCount="3"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

Kanban with Index-Based Sorting

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSortSettings SortBy="SortOrderBy.Index" Field="RankId"></KanbanSortSettings>
</SfKanban>

Key Properties Reference

Property	Component	Description
KeyField	SfKanban	Maps the data field that determines which column a card belongs to
DataSource	SfKanban	Binds local or remote data to the Kanban
AllowDragAndDrop	SfKanban	Enables/disables drag-and-drop (default: true)
EnableTooltip	SfKanban	Shows card details on hover
EnableRtl	SfKanban	Enables right-to-left layout
HeaderField	KanbanCardSettings	Maps the unique ID field for card headers
ContentField	KanbanCardSettings	Maps the field shown in card body
KeyField	KanbanColumn	One or more status values that map cards to this column
AllowToggle	KanbanColumn	Allows column expand/collapse
MinCount	KanbanColumn	Minimum card count for WIP validation
MaxCount	KanbanColumn	Maximum card count for WIP validation
TransitionColumns	KanbanColumn	Restricts cards to only drop into specified columns
AllowDrop	KanbanColumn	Prevents cards from being dropped into a column
AllowDrag	KanbanColumn	Prevents cards from being dragged from a column
KeyField	KanbanSwimlaneSettings	Groups cards into swimlane rows by this field
SortBy	KanbanSortSettings	Sorting mode: DataSourceOrder, Index, or Custom