Syncfusion.AspNetCore.Kanban

Syncfusion® ASP.NET Core Kanban Component

A visual task management component for organizing work items into columns representing workflow stages. Ideal for agile project management and task-tracking applications.

Key Features

• Drag-and-drop cards between columns to represent workflow transitions
• WIP (Work in Progress) limit configuration per column
• Swimlane grouping for categorizing cards across lanes
• Card filtering, searching, and sorting
• Custom card templates and card color indicators
• Dialog-based and inline card editing
• Collapsed column support and column customization

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.Kanban

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.Kanban

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    <!-- Themes package -->
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    
    <!-- Script references -->
    <script src="_content/Syncfusion.AspNetCore.Kanban/scripts/sf-kanban.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a Model

using System.Collections.Generic;

public class KanbanTask
{
    public int Id { get; set; }
    public string Status { get; set; }
    public string Summary { get; set; }
    public string Assignee { get; set; }
}

Step 2: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class IndexModel : PageModel
{
    public List<KanbanTask> Tasks { get; set; } = new List<KanbanTask>
    {
        new KanbanTask { Id = 1, Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new KanbanTask { Id = 2, Status = "InProgress", Summary = "Enhance the performance of the editing module.", Assignee = "Andrew Fuller" },
        new KanbanTask { Id = 3, Status = "Testing", Summary = "Improve the performance of the new feature.", Assignee = "Michael Suyama" }
    };

    public void OnGet()
    {
        // Load tasks
    }
}

Step 3: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel

<div class="container mt-5">
    <h2>Kanban Board Demo</h2>

    <ejs-kanban id="kanban" keyField="Status" dataSource="@Model.Tasks">
        <e-kanban-columns>
            <e-kanban-column key="Open" text="Open"></e-kanban-column>
            <e-kanban-column key="InProgress" text="In Progress"></e-kanban-column>
            <e-kanban-column key="Testing" text="Testing"></e-kanban-column>
            <e-kanban-column key="Done" text="Done"></e-kanban-column>
        </e-kanban-columns>
        <e-kanban-cardsettings contentField="Summary" headerField="Id"></e-kanban-cardsettings>
    </ejs-kanban>
</div>

Step 4: Run the Application

Press Ctrl+F5 to run the application in your browser.

Documentation

• Getting Started
• API Reference
• Live Demos

Support

• Submit a support ticket

• Community forums

• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license

• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

[email protected] | Toll Free: 1-888-9-DOTNET