Cards in ASP.NET MVC Kanban component

21 Dec 202224 minutes to read

The cards are main elements in Kanban board, which represent the task information with header and content. The header and content of a card is fetched from the corresponding mapping fields. The card layout can be customized with template also.

Drag-and-drop

Transit or change the card position using the drag-and-drop functionality. By default, the AllowDragAndDrop property is enabled on the Kanban board, which is used to change the card position by column-to-column or within the column.

Added dotted border on Kanban cells except the dragged clone cells when dragging, which indicates the possible ways for dropping the cards into the cells.

The card header is achieved by mapping the HeaderField property, which is placed inside the CardSettings property. By default, the ShowHeader property enabled by Kanban board that is used to show the header at the top of the card.

NOTE

The HeaderField property of CardSettings is mandatory to render the cards in the Kanban board. It acts as a unique field that is used to avoid the duplication of card data. You can not change the HeaderField of mapped data value using the updateCard public method or server-side update of data.

In the following demo, the ShowHeader property is disabled on Kanban board.

CSHTML
Datasource.cs
Controller.cs
@Html.EJS().Kanban("kanban").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).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").ShowHeader(false);
       }).Render()
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 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;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.data = new KanbanDataModels().KanbanTasks();
        return View();
    }
}

Output be like the below.

kanban

Content

The card’s content is fetched from data source using the ContentField property, which is placed inside the CardSettings property. If the ContentField property is not used, card is rendered with empty content.

Template

You can customize the default card layout using template as per your application needs. This can be achieved by template of the CardSettings property.

CSHTML
Datasource.cs
Controller.cs
@Html.EJS().Kanban("kanban").KeyField("Category").DataSource((IEnumerable<object>)ViewBag.data).Columns(col =>
       {
           col.HeaderText("Menu").KeyField("Menu").Add();
           col.HeaderText("Order").KeyField("Order").Add();
           col.HeaderText("Ready to Serve").KeyField("Ready to Serve").Add();
           col.HeaderText("Delivered").KeyField("Delivered,Served").Add();
       }).CardSettings(card =>  {
           card.HeaderField("Id").Template("#cardTemplate");
       }).Render()
 <script id="cardTemplate" type="text/x-jsrender">
        <div class='card-template'>
            <div class='card-template-wrap'>
                <table class='card-template-wrap'>
                    <colgroup>
                        <col style="width:35px">
                        <col style="width:calc(100% - 45px)">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td class='e-image'>
                                <img src="../Content/images/Kanban/${ImageURL}.png" alt="">
                            </td>
                            <td class='e-title'>
                                <div class="e-card-stacked">
                                    <div class='e-card-header'>
                                        <div class='e-card-header-caption'>
                                            <div class='e-card-header-title e-tooltip-text'>${Title}</div>
                                        </div>
                                    </div>
                                    <div class="e-card-content" style="line-height:2.75em">
                                        <table class='card-template-wrap'>
                                            <tbody>
                                                <tr class='e-tooltip-text'>
                                                    ${if(Category =="Menu" || Category=="Order" || Category=="Ready to Serve")}
                                                    <td colspan="2">
                                                        <div class='e-description'>
                                                            ${if(Category =="Menu")}
                                                            ${Description}
                                                            ${else}
                                                            ${OrderID}
                                                            ${/if}
                                                        </div>
                                                    </td>
                                                    ${else}
                                                    <td><div class='e-description'>${OrderID}</div></td>
                                                    <td><span class='e-icons e-done'></span></td>
                                                    ${/if}
                                                </tr>
                                                <tr>
                                                    ${if(Category !="Menu")}
                                                    ${if(Category =="Order")}
                                                    <td><div class='e-preparingText e-tooltip-text'>Preparing</div></td>
                                                    <td class='e-prepare'>
                                                        <div class='e-time e-tooltip-text'>
                                                            <div class='e-icons e-clock'></div><div class='e-mins'>15 mins</div>
                                                        </div>
                                                    </td>
                                                    ${/if}
                                                    ${if(Category =="Ready to Serve")}
                                                    <td><div class='e-readyText e-tooltip-text'>Ready to Serve</div></td>
                                                    <td class='e-prepare'>
                                                        <div class='e-time e-tooltip-text'>
                                                            <div class='e-icons e-clock'></div><div class='e-mins'>5 mins</div>
                                                        </div>
                                                    </td>
                                                    ${/if}
                                                    ${if(Category =="Delivered" || Category=="Served")}
                                                    <td><div class='e-deliveredText e-tooltip-text'>Delivered</div></td>
                                                    ${/if}
                                                    ${else}
                                                    <td><div class='e-size e-tooltip-text'>${Size}</div></td>
                                                    <td><div class='e-price e-tooltip-text'>${Price}</div></td>
                                                    ${/if}
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
public class KanbanDataModels
    {
    public string Id { get; set; }
    public string OrderID { get; set; }
    public string Title { get; set; }
    public string Type { get; set; }
    public string Size { get; set; }
    public string Status { get; set; }
    public string Category { get; set; }
    public string Price { get; set; }
    public string Description { get; set; }
    public string Tags { get; set; }
    public string ImageURL { get; set; }

         public List<KanbanDataModels> KanbanPizzaData()
        {
            List<KanbanDataModels> PizzaData = new List<KanbanDataModels>();
            PizzaData.Add(new KanbanDataModels { Id = "1", OrderID = "Order ID - #16365", Title = "Mexican Green Wave", Type = "Vegetarian", Size = "Small", Category = "Order", Description = "Stromboli sandwich with chili sauce.", Tags = "Onions Pepper Cheese", ImageURL = "menu_01" });
            PizzaData.Add(new KanbanDataModels { Id = "2", OrderID = "Order ID - #16366", Title = "Milan Veg Fantasy", Type = "Vegetarian", Size = "Medium", Category = "Order", Description = "Zucchini wrapped in spicy grilled seasoning along with tomato and jalapeno.", Tags = "Onions Pepper Tomato Zucchini", ImageURL = "menu_01" });
            PizzaData.Add(new KanbanDataModels { Id = "3", OrderID = "Order ID - #16367", Title = "Peppy Paneer", Type = "Vegetarian", Size = "Large", Category = "Ready to Serve", Description = "It's made using toppings of tomato mozzarella cheese and fresh basil which represent the red white and green of the Italian flag.", Tags = "Onions Pepper Cheese", ImageURL = "menu_02" });
            PizzaData.Add(new KanbanDataModels { Id = "4", OrderID = "Order ID - #16368", Title = "Margherita", Type = "Vegetarian", Size = "Small", Category = "Menu", Description = "Lebanese Pizza topped with tomato sauce.", Tags = "Onions Pepper Cheese", ImageURL = "menu_03", Price = "$4.79" });
            PizzaData.Add(new KanbanDataModels { Id = "5", OrderID = "Order ID - #16369", Title = "Farm House", Type = "Vegetarian", Size = "Small", Category = "Delivered", Description = "Stromboli sandwich with chili sauce.", Tags = "Onions Pepper Cheese", ImageURL = "menu_04" });
            PizzaData.Add(new KanbanDataModels { Id = "6", OrderID = "Order ID - #16370", Title = "BBQ Chicken", Type = "Non-Vegetarian", Size = "Medium", Category = "Ready to Serve", Description = "BBQ Chicken with chili sauce.", Tags = "Onions Pepper Chicken BBQ", ImageURL = "menu_05", Price = "$4.79" });
            PizzaData.Add(new KanbanDataModels { Id = "7", OrderID = "Order ID - #16371", Title = "Tandoori Chicken", Type = "Non-Vegetarian", Size = "Large", Category = "Ready to Serve", Description = "Tandoori Chicken with chili sauce.", Tags = "Onions Tandoori Pepper Chicken", ImageURL = "menu_06" });
            PizzaData.Add(new KanbanDataModels { Id = "8", OrderID = "Order ID - #16372", Title = "BBQ Prawn", Type = "Non-Vegetarian", Size = "Large", Category = "Order", Description = "BBQ Prawn with chili sauce.", Tags = "Onions BBQ Pepper Prawn", ImageURL = "menu_07" });
            PizzaData.Add(new KanbanDataModels { Id = "9", OrderID = "Order ID - #16373", Title = "Italian Chicken", Type = "Non-Vegetarian", Size = "Medium", Category = "Menu", Description = "Italian Chicken with White sauce.", Tags = "Onions Pepper Italian Chicken", ImageURL = "menu_08", Price = "$11.99" });
            PizzaData.Add(new KanbanDataModels { Id = "10", OrderID = "Order ID - #16374", Title = "Garlic Prawn", Type = "Non-Vegetarian", Size = "Small", Category = "Delivered", Description = "Prawn with chili sauce.", Tags = "Onions Garlic Pepper Prawn", ImageURL = "menu_13" });
            PizzaData.Add(new KanbanDataModels { Id = "11", OrderID = "Order ID - #16375", Title = "Double Cheese Margherita", Type = "Vegetarian", Size = "Medium", Category = "Delivered", Description = "Margherita with chili sauce and double Cheese.", Tags = "Onions, Pepper, Cheese", ImageURL = "menu_10", Price = "$11.99" });
            PizzaData.Add(new KanbanDataModels { Id = "12", OrderID = "Order ID - #16376", Title = "Veggie Delight", Type = "Vegetarian", Size = "Large", Category = "Menu", Description = "Veggie Delight with chili sauce and extra toppings.", Tags = "Onions, Capsicum, Pepper, Cheese", ImageURL = "menu_11", Price = "$14.99" });
            PizzaData.Add(new KanbanDataModels { Id = "13", OrderID = "Order ID - #16377", Title = "Paneer Tikka", Type = "Vegetarian", Size = "Large", Category = "Order", Description = "Paneer Tikka with chili sauce.", Tags = "Onions, Paneer, Pepper, Tikka", ImageURL = "menu_12", Price = "$14.99" });
            PizzaData.Add(new KanbanDataModels { Id = "14", OrderID = "Order ID - #16378", Title = "Chicken Tikka", Type = "Non-Vegetarian", Size = "Medium", Category = "Ready to Serve", Description = "Chicken Tikka with White sauce.", Tags = "Onions, Pepper, Chicken, Tikka, Boneless", ImageURL = "menu_14", Price = "$11.99" });
            PizzaData.Add(new KanbanDataModels { Id = "15", OrderID = "Order ID - #16379", Title = "Kadai Chicken", Type = "Non-Vegetarian", Size = "Small", Category = "Menu", Description = "Kadai Chicken with chili sauce.", Tags = "Onions, Pepper, Chicken", ImageURL = "menu_15", Price = "$4.79" });
            PizzaData.Add(new KanbanDataModels { Id = "16", OrderID = "Order ID - #16380", Title = "Hot Vege", Type = "Vegetarian", Size = "Medium", Category = "Delivered", Description = "Capsicum with chili sauce and Double Cheese with extra toppings.", Tags = "Onions, Pepper, Capsicum, Cheese", ImageURL = "menu_16", Price = "$11.99" });
            PizzaData.Add(new KanbanDataModels { Id = "17", OrderID = "Order ID - #16381", Title = "Kadai Paneer", Type = "Vegetarian", Size = "Large", Category = "Menu", Description = "Kadai Paneer with chili sauce and extra toppings.", Tags = "Onions, Capsicum, Pepper, Paneer", ImageURL = "menu_17", Price = "$14.99" });
            PizzaData.Add(new KanbanDataModels { Id = "18", OrderID = "Order ID - #16382", Title = "Tomato Pizza", Type = "Vegetarian", Size = "Large", Category = "Served", Description = "Tomato Pizza with chili sauce and extra toppings.", Tags = "Onions, Tomato, Pepper, Capsicum", ImageURL = "menu_18", Price = "$14.99" });
            return PizzaData;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.data = new KanbanDataModels().KanbanPizzaData();
        return View();
    }
}

Output be like the below.

kanban

Selection

Kanban board allows to select single and multiple selection of cards when mouse or keyboard interactions using SelectionType property. The property contains following types.

None: No cards are allowed to select from Kanban board.
Single: Only one card allowed to select at a time in the Kanban board.
Multiple: Multiple cards are allowed to select in a board.

Multiple Selection

Select the multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set Multiple in SelectionType to enable the multiple selection in a board.

CSHTML
Datasource.cs
Controller.cs
@Html.EJS().Kanban("kanban").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).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").SelectionType(SelectionType.Multiple);
       }).Render()
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 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;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.data = new KanbanDataModels().KanbanTasks();
        return View();
    }
}

Output be like the below.

kanban