Syncfusion.AspNetCore.Kanban
34.1.31
Prefix Reserved
dotnet add package Syncfusion.AspNetCore.Kanban --version 34.1.31
NuGet\Install-Package Syncfusion.AspNetCore.Kanban -Version 34.1.31
<PackageReference Include="Syncfusion.AspNetCore.Kanban" Version="34.1.31" />
<PackageVersion Include="Syncfusion.AspNetCore.Kanban" Version="34.1.31" />
<PackageReference Include="Syncfusion.AspNetCore.Kanban" />
paket add Syncfusion.AspNetCore.Kanban --version 34.1.31
#r "nuget: Syncfusion.AspNetCore.Kanban, 34.1.31"
#:package Syncfusion.AspNetCore.Kanban@34.1.31
#addin nuget:?package=Syncfusion.AspNetCore.Kanban&version=34.1.31
#tool nuget:?package=Syncfusion.AspNetCore.Kanban&version=34.1.31
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.Kanban
3. Add Stylesheet & Script References
In your layout file (~/Pages/Shared/_Layout.cshtml):
<head>
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
<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
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
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
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Lists (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net8.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Lists (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net9.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Lists (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.