Getting Started with ASP.NET MVC Kanban

This section briefly explains how to include the ASP.NET MVC Kanban control in your ASP.NET MVC application using Visual Studio.

Ready to streamline your Syncfusion^® ASP.NET MVC development? Discover the full potential of Syncfusion^® ASP.NET MVC controls with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

The following prerequisites are required to create an ASP.NET MVC application with the Kanban control:

Visual Studio 2019 or later (Visual Studio 2022 is recommended)
.NET Framework 4.6.2 or later
An active internet connection to download the NuGet package and CDN assets

Refer to the System requirements for ASP.NET MVC controls for the complete list of supported environments.

Create ASP.NET MVC application with HTML helper

You can create an ASP.NET MVC project in one of two ways. Choose the option that matches your development setup:

Use the standard Microsoft template if you are new to ASP.NET MVC and want a plain project: Create a Project using Microsoft Templates
Use the Syncfusion^® ASP.NET MVC extension if you want a project that is pre-configured with Syncfusion^® assemblies, themes, and helper references: Create a Project using Syncfusion^® ASP.NET MVC Extension

After the project is created, ensure that a controller named HomeController (with an Index action) and a corresponding ~/Views/Home/Index.cshtml view exist. The Kanban control will be added to this view in the later steps.

Install ASP.NET MVC package in the application

To add ASP.NET MVC controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.MVC5 and then install it.

Package Manager
Install-Package Syncfusion.EJ2.MVC5 -Version 34.2.2

NOTE

Syncfusion^® ASP.NET MVC controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.MVC5 NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion^® license key.

Add namespace

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add stylesheet and script resources

The theme and scripts are referenced using the CDN inside the <head> of the ~/Views/Shared/_Layout.cshtml file as follows. This example uses the Fluent theme; see the note below for the full list of available themes.

~/_Layout.cshtml
<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.2/fluent.css" />
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>
</head>

NOTE

Check out the Themes topic to learn the different ways (CDN, NPM package, and CRG) to refer to styles in an ASP.NET MVC application, and to achieve the expected appearance for Syncfusion^® ASP.NET MVC controls. Check out the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET MVC application.

Register Syncfusion^® script manager

Also, register the script manager @Html.EJS().ScriptManager() at the end of the <body> element in the ~/Views/Shared/_Layout.cshtml file as follows.

~/_Layout.cshtml
<body>
...
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Add ASP.NET MVC Kanban control

Now, add the Syncfusion^® ASP.NET MVC Kanban control in ~/Views/Home/Index.cshtml page.

CSHTML

@Html.EJS().Kanban("kanban").Columns(col =>
            {
           col.HeaderText("To Do").KeyField("Open").Add();
           col.HeaderText("In Progress").KeyField("InProgress").Add();
           col.HeaderText("Testing").KeyField("Testing").Add();
           col.HeaderText("Done").KeyField("Close").Add();
       }).Render()

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion^® ASP.NET MVC Kanban control will be rendered in the default web browser.

ASP.NET MVC Kanban Control

Populating cards

To populate the empty Kanban with cards, define the list or remote data using the DataSource property. To define DataSource, the mandatory fields in the list should be relevant to KeyField. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.

CSHTML
HomeController.cs
@model List<KanbanSample.Controllers.KanbanDataModels>

@Html.EJS().Kanban("kanban").KeyField("Status").DataSource((IEnumerable<object>)Model).Columns(col =>
	{
	   col.HeaderText("To Do").KeyField("Open").Add();
	   col.HeaderText("In Progress").KeyField("InProgress").Add();
	   col.HeaderText("Testing").KeyField("Testing").Add();
	   col.HeaderText("Done").KeyField("Close").Add();
   }).CardSettings(card =>  {
	   card.ContentField("Summary").HeaderField("Id");
   }).Render()
public class HomeController : Controller
{
public ActionResult Index()
{
return View(KanbanDataModels.KanbanTasks());
}
}
public class KanbanDataModels
{
public string Id { get; set; }
public string Title { get; set; }
public string Status { get; set; }
public string Summary { get; set; }
public string Type { get; set; }
public string Priority { get; set; }
public string Tags { get; set; }
public double Estimate { get; set; }
public string Assignee { get; set; }
public int RankId { get; set; }
public string Color { get; set; }

    public static List<KanbanDataModels> KanbanTasks()
    {
        List<KanbanDataModels> TaskDetails = new List<KanbanDataModels>();
        TaskDetails.Add(new KanbanDataModels { Id = "Task 1", Title = "Task  - 29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Type = "Story", Priority = "Low", Tags = "Analyze,Customer", Estimate = 3.5, Assignee = "Nancy Davloio", RankId = 1, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 2", Title = "Task  - 29002", Status = "InProgress", Summary = "Improve application performance", Type = "Improvement", Priority = "Normal", Tags = "Improvement", Estimate = 6, Assignee = "Andrew Fuller", RankId = 1, Color = "#7d7297" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 3", Title = "Task  - 29003", Status = "Open", Summary = "Arrange a web meeting with the customer to get new requirements.", Type = "Others", Priority = "Critical", Tags = "Meeting", Estimate = 5.5, Assignee = "Janet Leverling", RankId = 2, Color = "#27AE60" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 4", Title = "Task  - 29004", Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Type = "Bug", Priority = "Release Breaker", Tags = "IE", Estimate = 2.5, Assignee = "Janet Leverling", RankId = 2, Color = "#cc0000" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 5", Title = "Task  - 29005", Status = "Review", Summary = "Fix the issues reported by the customer.", Type = "Bug", Priority = "Low", Tags = "Customer", Estimate = 3.5, Assignee = "Steven walker", RankId = 1, Color = "#cc0000" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 6", Title = "Task  - 29007", Status = "Validate", Summary = "Validate new requirements", Type = "Improvement", Priority = "Low", Tags = "Validation", Estimate = 1.5, Assignee = "Robert King", RankId = 1, Color = "#7d7297" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 7", Title = "Task  - 29009", Status = "Review", Summary = "Fix the issues reported in Safari browser.", Type = "Bug", Priority = "Release Breaker", Tags = "Fix,Safari", Estimate = 1.5, Assignee = "Nancy Davloio", RankId = 2, Color = "#cc0000" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 8", Title = "Task  - 29010", Status = "Close", Summary = "Test the application in the IE browser.", Type = "Story", Priority = "Low", Tags = "Review,IE", Estimate = 5.5, Assignee = "Margaret hamilt", RankId = 3, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 9", Title = "Task  - 29011", Status = "Validate", Summary = "Validate the issues reported by the customer.", Type = "Story", Priority = "High", Tags = "Validation,Fix", Estimate = 1, Assignee = "Steven walker", RankId = 1, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 10", Title = "Task  - 29015", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Type = "Story", Priority = "High", Tags = "Database,SQL", Estimate = 5.5, Assignee = "Margaret hamilt", RankId = 4, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 11", Title = "Task  - 29016", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Priority = "Critical", Type = "Bug", Tags = "Database,Sql2008", Estimate = 2.5, Assignee = "Janet Leverling", RankId = 4, Color = "#cc0000" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 12", Title = "Task  - 29017", Status = "Review", Summary = "Fix the issues reported in data binding.", Type = "Story", Priority = "Normal", Tags = "Databinding", Estimate = 3.5, Assignee = "Janet Leverling", RankId = 4, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 13", Title = "Task  - 29018", Status = "Close", Summary = "Analyze SQL server 2008 connection.", Type = "Story", Priority = "Release Breaker", Tags = "Grid,Sql", Estimate = 2, Assignee = "Andrew Fuller", RankId = 4, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 14", Title = "Task  - 29019", Status = "Validate", Summary = "Validate databinding issues.", Type = "Story", Priority = "Low", Tags = "Validation", Estimate = 1.5, Assignee = "Margaret hamilt", RankId = 1, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 15", Title = "Task  - 29020", Status = "Close", Summary = "Analyze grid control.", Type = "Story", Priority = "High", Tags = "Analyze", Estimate = 2.5, Assignee = "Margaret hamilt", RankId = 5, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 16", Title = "Task  - 29021", Status = "Close", Summary = "Stored procedure for initial data binding of the grid.", Type = "Others", Priority = "Release Breaker", Tags = "Databinding", Estimate = 1.5, Assignee = "Steven walker", RankId = 6, Color = "#27AE60" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 17", Title = "Task  - 29022", Status = "Close", Summary = "Analyze stored procedures.", Type = "Story", Priority = "Release Breaker", Tags = "Procedures", Estimate = 5.5, Assignee = "Janet Leverling", RankId = 7, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 18", Title = "Task  - 29023", Status = "Validate", Summary = "Validate editing issues.", Type = "Story", Priority = "Critical", Tags = "Editing", Estimate = 1, Assignee = "Nancy Davloio", RankId = 1, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 19", Title = "Task  - 29024", Status = "Review", Summary = "Test editing functionality.", Type = "Story", Priority = "Normal", Tags = "Editing,Test", Estimate = 0.5, Assignee = "Nancy Davloio", RankId = 5, Color = "#8b447a" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 20", Title = "Task  - 29025", Status = "Open", Summary = "Enhance editing functionality.", Type = "Improvement", Priority = "Low", Tags = "Editing", Estimate = 3.5, Assignee = "Andrew Fuller", RankId = 5, Color = "#7d7297" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 21", Title = "Task  - 29026", Status = "InProgress", Summary = "Improve the performance of the editing functionality.", Type = "Epic", Priority = "High", Tags = "Performance", Estimate = 6, Assignee = "Nancy Davloio", RankId = 5, Color = "#6d7492" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 22", Title = "Task  - 29027", Status = "Open", Summary = "Arrange web meeting with the customer to show editing demo.", Type = "Others", Priority = "High", Tags = "Meeting,Editing", Estimate = 5.5, Assignee = "Steven walker", RankId = 6, Color = "#27AE60" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 23", Title = "Task  - 29029", Status = "Review", Summary = "Fix the editing issues reported by the customer.", Type = "Bug", Priority = "Low", Tags = "Editing,Fix", Estimate = 3.5, Assignee = "Janet Leverling", RankId = 6, Color = "#cc0000" });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 24", Title = "Task  - 29030", Status = "Testing", Summary = "Fix the issues reported by the customer.", Type = "Bug", Priority = "Critical", Tags = "Customer", Estimate = 3.5, Assignee = "Steven walker", RankId = 1 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 25", Title = "Task  - 29031", Status = "Testing", Summary = "Fix the issues reported in Safari browser.", Type = "Bug", Priority = "Release Breaker", Tags = "Fix,Safari", Estimate = 1.5, Assignee = "Nancy Davloio", RankId = 2 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 26", Title = "Task  - 29032", Status = "Testing", Summary = "Check Login page validation.", Type = "Story", Priority = "Release Breaker", Tags = "Testing", Estimate = 0.5, Assignee = "Michael Suyama", RankId = 3 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 27", Title = "Task  - 29033", Status = "Testing", Summary = "Fix the issues reported in data binding.", Type = "Story", Priority = "Normal", Tags = "Databinding", Estimate = 3.5, Assignee = "Janet Leverling", RankId = 4 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 28", Title = "Task  - 29034", Status = "Testing", Summary = "Test editing functionality.", Type = "Story", Priority = "Normal", Tags = "Editing,Test", Estimate = 0.5, Assignee = "Nancy Davloio", RankId = 5 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 29", Title = "Task  - 29035", Status = "Testing", Summary = "Fix editing issues reported in Firefox.", Type = "Bug", Priority = "Critical", Tags = "Editing,Fix", Estimate = 1.5, Assignee = "Robert King", RankId = 7 });
        TaskDetails.Add(new KanbanDataModels { Id = "Task 30", Title = "Task  - 29036", Status = "Testing", Summary = "Test editing feature in the IE browser.", Type = "Story", Priority = "Normal", Tags = "Testing", Estimate = 5.5, Assignee = "Janet Leverling", RankId = 10 });
        return TaskDetails;
    }

}

ASP.NET MVC Kanban populated with sample task cards across all columns.

Enable swimlane

The Swimlane can be enabled by mapping the SwimlaneSettings.KeyField to the appropriate column name in the dataSource. This enables the grouping of cards based on the values in the mapped swimlane column. In this example, the Assignee column is used to group cards by the assignee. The Index action and KanbanDataModels class from the previous section are reused unchanged.

CSHTML

@model List<KanbanSample.Controllers.KanbanDataModels>

@Html.EJS().Kanban("kanban").KeyField("Status").DataSource((IEnumerable<object>)Model).Columns(col =>
		{
	   col.HeaderText("To Do").KeyField("Open").Add();
	   col.HeaderText("In Progress").KeyField("InProgress").Add();
	   col.HeaderText("Testing").KeyField("Testing").Add();
	   col.HeaderText("Done").KeyField("Close").Add();
   }).CardSettings(card =>  {
	   card.ContentField("Summary").HeaderField("Id");
   }).SwimlaneSettings(swim => {
	   swim.KeyField("Assignee");
   }).Render()

ASP.NET MVC Kanban with cards grouped into swimlane rows by assignee.

NOTE

View the complete sample on GitHub.

Troubleshooting

If the Kanban control does not render or behaves unexpectedly, verify the following:

The Syncfusion.EJ2.MVC5 NuGet package is restored and referenced by the project.
The Syncfusion.EJ2 namespace is added to ~/Views/Web.config.
The CDN links use the same 34.2.2 value as the EJS().ScriptManager() call.
The Index view exists at the path ~/Views/Home/Index.cshtml.
The license key is registered in Global.asax; otherwise, a license-warning banner appears in development mode.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with ASP.NET MVC Kanban

Prerequisites

Create ASP.NET MVC application with HTML helper

Install ASP.NET MVC package in the application

Add namespace

Add stylesheet and script resources

Register Syncfusion^® script manager

Add ASP.NET MVC Kanban control

Populating cards

Enable swimlane

Troubleshooting

See also

Getting Started with ASP.NET MVC Kanban

Prerequisites

Create ASP.NET MVC application with HTML helper

Install ASP.NET MVC package in the application

Add namespace

Add stylesheet and script resources

Register Syncfusion® script manager

Add ASP.NET MVC Kanban control

Populating cards

Enable swimlane

Troubleshooting

See also

Register Syncfusion^® script manager