Drag and drop in ASP.NET MVC Kanban control

21 Dec 202224 minutes to read

All cards can be dragged and dropped across the columns or within the columns or swimlane row or kanban to an external source and vice versa.

The following drag and drop types are available in the Kanban board.

  • Internal drag and drop
    • Column drag and drop
    • Swimlane drag and drop
  • External drag and drop
    • Kanban to Kanban
    • Kanban to External source and vice versa.

NOTE

Dropped card position varies based on the SortSettings property.

Internal drag and drop

Allows the user to drag and drop the cards within the kanban board. Based on this, we can categorize into two ways.

  • Column drag and drop
  • Swimlane drag and drop

Column drag and drop

By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the AllowDragAndDrop property.

NOTE

You can prevent the drag or drop behavior of the particular column by disabling the AllowDrag or AllowDrop property.

You can also control the flow of transition cards between the columns by using the TransitionColumns property.

In the following example, disable the drag and drop behavior on the Kanban board.

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

Swimlane drag and drop

By default, Swimlane allows drag and drop across the columns within the swimlane row. Kanban does not allow dragging the cards across the swimlane rows.

Enabling the DragAndDrop property allows you to drag the cards across the swimlane rows, which is specified inside the SwimlaneSettings property.

@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");
       }).SwimlaneSettings(swim =>  {
           swim.KeyField("Assignee").AllowDragAndDrop(true);
       }).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> TaskDetais = new List<KanbanDataModels>();
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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" });
            TaskDetais.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 });
            TaskDetais.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 });
            TaskDetais.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 });
            TaskDetais.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 });
            TaskDetais.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 });
            TaskDetais.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 });
            TaskDetais.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 TaskDetais;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.data = new KanbanDataModels().KanbanTasks();
        return View();
    }
}

External drag and drop

Allows the user to drag and drop the cards from one kanban to another kanban or Kanban to an external source and vice versa.

Kanban to kanban

Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the ExternalDropId property which is used to specify the id of the dropped kanban element and the DragStop event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the deleteCard and addCard public methods.

NOTE

Before adding a card to dropped kanban, you can manually change the card data HeaderField when the same card data HeaderField is dropped to another Kanban.

In the following example, Drag the card from one Kanban and drop it into another kanban using the DragStop event. In this event, remove the card from the dragged Kanban by using the deleteCard public method and add the card to the dropped Kanban by using the addCard public method.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h4>Kanban A</h4>
            @Html.EJS().Kanban("kanbanA").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).ExternalDropId((string[])ViewBag.externalDropIdA).Columns(col =>
                       {
                      col.HeaderText("To Do").KeyField("Open").Add();
                      col.HeaderText("Done").KeyField("Close").Add();
                  }).CardSettings(card =>
                        {
                      card.ContentField("Summary").HeaderField("Id");
                  }).DragStop("onDragStopA").Render()
        </div>
        <div class="col-md-6">
            <h4>Kanban B</h4>
            @Html.EJS().Kanban("kanbanB").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).ExternalDropId((string[])ViewBag.externalDropIdB).Columns(col =>
                       {
                      col.HeaderText("To Do").KeyField("Open").Add();
                      col.HeaderText("Done").KeyField("Close").Add();
                  }).CardSettings(card =>
                        {
                      card.ContentField("Summary").HeaderField("Id");
                  }).DragStop("onDragStopB").Render()
        </div>
    </div>
</div>
<script>
    function onDragStopA(args) {
        var kanbanObjA = document.querySelector("#kanbanA").ej2_instances[0];
        var kanbanObjB = document.querySelector("#kanbanB").ej2_instances[0];
        if (ej.base.closest(args.event.target, '#kanbanB')) {
            kanbanObjA.deleteCard(args.data);
            args.data.forEach(function (card, i) {
                var index = kanbanObjB.kanbanData.findIndex(function (colData) {
                    return colData[kanbanObjB.cardSettings.headerField] === card[kanbanObjB.cardSettings.headerField];
                });
                if (index !== -1) {
                    card[kanbanObjB.cardSettings.headerField] = Math.max.apply(Math, kanbanObjB.kanbanData.map(function (obj) { return parseInt(obj[kanbanObjB.cardSettings.headerField], 10); })) + ++i;
                }
            });
            kanbanObjB.addCard(args.data, args.dropIndex);
            args.cancel = true;
        }
    }
    function onDragStopB(args) {
        var kanbanObjA = document.querySelector("#kanbanA").ej2_instances[0];
        var kanbanObjB = document.querySelector("#kanbanB").ej2_instances[0];
        if (ej.base.closest(args.event.target, '#kanbanA')) {
            kanbanObjB.deleteCard(args.data);
            args.data.forEach(function (card, i) {
                var index = kanbanObjA.kanbanData.findIndex(function (colData) {
                    return colData[kanbanObjA.cardSettings.headerField] === card[kanbanObjA.cardSettings.headerField];
                });
                if (index !== -1) {
                    card[kanbanObjA.cardSettings.headerField] = Math.max.apply(Math, kanbanObjA.kanbanData.map(function (obj) { return parseInt(obj[kanbanObjA.cardSettings.headerField], 10); })) + ++i;
                }
            });
            kanbanObjA.addCard(args.data, args.dropIndex);
            args.cancel = true;
        }
    }
</script>
public class KanbanDataModels
    {
        public int 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> TaskDetais = new List<KanbanDataModels>();
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 });
            TaskDetais.Add(new KanbanDataModels { Id = 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 TaskDetais;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.externalDropIdA = new string[] { "#kanbanB" };
        ViewBag.externalDropIdB = new string[] { "#kanbanA" };
        ViewBag.data = new KanbanDataModels().KanbanTasks();
    }
}

Treeview to Kanban

Drag the card from the Kanban board and drop it to the Treeview component and vice versa.

In the following sample, remove the data from the Kanban board using the deleteCard public method and add to the Treeview component using the addNodes public method at Kanban DragStop event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the removeNodes public method and add to Kanban board using the openDialog public method when dragging the list from the Treeview component and dropping it to the kanban board.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h4>Kanban</h4>
            @Html.EJS().Kanban("Kanban").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).ExternalDropId((string[])ViewBag.externalDropId).Columns(col =>
                       {
                      col.HeaderText("To Do").KeyField("Open").Add();
                      col.HeaderText("Done").KeyField("Close").Add();
                  }).CardSettings(card =>
                        {
                      card.ContentField("Summary").HeaderField("Id");
                  }).DragStop("onDragStop").Render()
        </div>
        <div class="col-md-6">
            <h4>TreeView</h4>
            @Html.EJS().TreeView("TreeView").Fields(fields => fields.DataSource((IEnumerable<object>)ViewBag.treeDataSource).Id("Id").Text("Status")).AllowDragAndDrop(true).NodeDragStop("onTreeDragStop").NodeTemplate("#treeTemplate").Render()
        </div>
    </div>
</div>
<script>
    function onDragStop(args) {
        var kanbanObj = document.querySelector("#Kanban").ej2_instances[0];
        var treeObj = document.querySelector("#TreeView").ej2_instances[0];
        if (ej.base.closest(args.event.target, "#TreeView")) {
            kanbanObj.deleteCard(args.data);
            treeObj.addNodes(args.data);
            args.cancel = true;
        }
    }
    function onTreeDragStop(args) {
        var kanbanObj = document.querySelector("#Kanban").ej2_instances[0];
        var treeObj = document.querySelector("#TreeView").ej2_instances[0];
        if (ej.base.closest(args.event.target, '#Kanban')) {
            var treeData = treeObj.fields.dataSource;
            var filteredData = treeData.filter(function (item) { return item.Id === parseInt(args.draggedNodeData.id, 10); });
            treeObj.removeNodes([args.draggedNodeData.id]);
            kanbanObj.openDialog('Add', filteredData[0]);
            args.cancel = true;
        }
    }
</script>
<script id="treeTemplate" type="text/x-template">
    <div id="waiting">
        <div id="treelist">
            <div id="treeviewlist">${Id} - ${Status}</div>
        </div>
    </div>
</script>
public class KanbanDataModels
    {
        public int 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> TreeDataSource()
        {
            List<KanbanDataModels> TaskDetais = new List<KanbanDataModels>();
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            return TaskDetais;
        }
            public List<KanbanDataModels> KanbanTasks()
        {
            List<KanbanDataModels> TaskDetais = new List<KanbanDataModels>();
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            return TaskDetais;
        }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.externalDropId = new string[] { "#TreeView" };
        ViewBag.data = new KanbanDataModels().KanbanTasks();
        ViewBag.treeDataSource = new KanbanDataModels().TreeDataSource();
        return View();
    }
}

Schedule to Kanban

Drag the card from the Kanban board and drop it to the Schedule component and vice versa.

In the following sample, remove the data from the Kanban board using the deleteCard public method and add to the schedule component using the addNodes public method at Kanban DragStop event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the removeNodes public method and add to Kanban board using the addCard public method when dragging the list from the Treeview component and dropping it to the kanban board.

@using Syncfusion.EJ2.Schedule
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h4>Kanban</h4>
            @Html.EJS().Kanban("Kanban").KeyField("Status").DataSource((IEnumerable<object>)ViewBag.data).ExternalDropId((string[])ViewBag.externalDropId).Columns(col =>
                       {
                      col.HeaderText("To Do").KeyField("Open").Add();
                      col.HeaderText("Done").KeyField("Close").Add();
                  }).CardSettings(card =>
                        {
                      card.ContentField("Summary").HeaderField("Id");
                  }).DragStop("onDragStop").Render()
        </div>
        <div class="col-md-6">
            <h4>Schedule</h4>
            @Html.EJS().Schedule("Schedule").Width("100%").Height("650px").Views(view => { view.Option(View.TimelineDay).Add(); view.Option(View.TimelineMonth).Add(); }).CurrentView(View.TimelineDay).SelectedDate(new DateTime(2018, 7, 1)).WorkHours(new ScheduleWorkHours { Highlight = true, Start = "08:00", End = "18:00" }).Group(group => group.EnableCompactView(false).Resources(ViewBag.Resources)).Resources(res =>
       {
           res.DataSource(ViewBag.Departments).Field("DepartmentID").Title("Department").Name("Departments").TextField("text").IdField("id").ColorField("color").Add();
           res.DataSource(ViewBag.Consultants).Field("ConsultantID").Title("Consultant").Name("Consultants").TextField("text").IdField("id").ColorField("color").GroupIDField("groupId").AllowMultiple(false).Add();
       }).ResourceHeaderTemplate("#resource-template").DragStop("scheduleDragStop").EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Name").Title("Patient Name")).StartTime(start => start.Name("StartTime").Title("From")).EndTime(end => end.Name("EndTime").Title("To")).Description(des => des.Name("Description").Title("Reason"))).DataSource(ViewBag.datasource)).Render()
        </div>
    </div>
</div>
<!-- Resource Header Template -->
<script id="resource-template" type="text/x-template">
    <div class="template-wrap">
        <div class="specialist-category">
            ${getConsultantImage(data)}
            <div class="specialist-name">${getConsultantName(data)}</div>
            <div class="specialist-designation">${getConsultantDesignation(data)}</div>
        </div>
    </div>
</script>
<script>
    function getConsultantName(value) {
        return value.resourceData[value.resource.textField];
    };

    function getConsultantImage() {
        return '';
    };

    function getConsultantDesignation(value) {
        let resourceName = value.resourceData[value.resource.textField];
        if (resourceName === 'GENERAL' || resourceName === 'DENTAL') {
            return '';
        } else {
            return value.resourceData.designation;
        }
    };
    function scheduleDragStop(args) {
        var kanbanObj = document.querySelector("#Kanban").ej2_instances[0];
        var scheduleObj = document.querySelector("#Schedule").ej2_instances[0];
        if (ej.base.closest(args.event.target, '#Kanban')) {
            scheduleObj.deleteEvent(args.data.Id);
            ej.base.removeClass([scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell');
            kanbanObj.openDialog('Add', args.data);
            args.cancel = true;
        }
    }
    function onDragStop(args) {
        var kanbanObj = document.querySelector("#Kanban").ej2_instances[0];
        var scheduleObj = document.querySelector("#Schedule").ej2_instances[0];
        if (ej.base.closest(args.event.target, '#Schedule')) {
            kanbanObj.deleteCard(args.data);
            scheduleObj.openEditor(args.data[0], 'Add', true);
            args.cancel = true;
        }
    }
</script>
public class KanbanDataModels
    {
        public int 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> TaskDetais = new List<KanbanDataModels>();
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            TaskDetais.Add(new KanbanDataModels { Id = 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" });
            return TaskDetais;
        }
    }
    public class ScheduleData
    {
        public List<HospitalData> GetHospitalData()
        {
            List<HospitalData> hospitalData = new List<HospitalData>();
            hospitalData.Add(new HospitalData
            {
                Id = 10,
                Name = "David",
                StartTime = new DateTime(2018, 7, 1, 9, 0, 0),
                EndTime = new DateTime(2018, 7, 1, 10, 0, 0),
                Description = "Health Checkup",
                DepartmentID = 1,
                ConsultantID = 1,
                DepartmentName = "GENERAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 11,
                Name = "John",
                StartTime = new DateTime(2018, 7, 1, 10, 30, 0),
                EndTime = new DateTime(2018, 7, 1, 11, 30, 0),
                Description = "Tooth Erosion",
                DepartmentID = 2,
                ConsultantID = 2,
                DepartmentName = "DENTAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 12,
                Name = "Peter",
                StartTime = new DateTime(2018, 7, 1, 12, 0, 0),
                EndTime = new DateTime(2018, 7, 1, 13, 0, 0),
                Description = "Eye and Spectacles Checkup",
                DepartmentID = 1,
                ConsultantID = 3,
                DepartmentName = "GENERAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 13,
                Name = "Starc",
                StartTime = new DateTime(2018, 7, 1, 14, 0, 0),
                EndTime = new DateTime(2018, 7, 1, 15, 0, 0),
                Description = "Toothaches",
                DepartmentID = 2,
                ConsultantID = 4,
                DepartmentName = "DENTAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 14,
                Name = "James",
                StartTime = new DateTime(2018, 7, 1, 10, 0, 0),
                EndTime = new DateTime(2018, 7, 1, 11, 0, 0),
                Description = "Surgery Appointment",
                DepartmentID = 1,
                ConsultantID = 5,
                DepartmentName = "GENERAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 15,
                Name = "Jercy",
                StartTime = new DateTime(2018, 7, 1, 9, 30, 0),
                EndTime = new DateTime(2018, 7, 1, 10, 30, 0),
                Description = "Tooth Sensitivity",
                DepartmentID = 2,
                ConsultantID = 6,
                DepartmentName = "DENTAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 16,
                Name = "Albert",
                StartTime = new DateTime(2018, 7, 2, 10, 0, 0),
                EndTime = new DateTime(2018, 7, 2, 11, 30, 0),
                Description = "Skin care treatment",
                DepartmentID = 1,
                ConsultantID = 7,
                DepartmentName = "GENERAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 17,
                Name = "Louis",
                StartTime = new DateTime(2018, 7, 2, 12, 30, 0),
                EndTime = new DateTime(2018, 7, 2, 13, 30, 0),
                Description = "General Checkup",
                DepartmentID = 1,
                ConsultantID = 9,
                DepartmentName = "DENTAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 18,
                Name = "Williams",
                StartTime = new DateTime(2018, 7, 2, 12, 0, 0),
                EndTime = new DateTime(2018, 7, 2, 14, 0, 0),
                Description = "Mouth Sores",
                DepartmentID = 2,
                ConsultantID = 10,
                DepartmentName = "DENTAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 19,
                Name = "David",
                StartTime = new DateTime(2018, 7, 2, 16, 30, 0),
                EndTime = new DateTime(2018, 7, 2, 18, 45, 0),
                Description = "Eye checkup and Treatment",
                DepartmentID = 1,
                ConsultantID = 1,
                DepartmentName = "GENERAL"
            });
            hospitalData.Add(new HospitalData
            {
                Id = 20,
                Name = "John",
                StartTime = new DateTime(2018, 7, 2, 19, 30, 0),
                EndTime = new DateTime(2018, 7, 2, 21, 45, 0),
                Description = "Tooth Decay",
                DepartmentID = 2,
                ConsultantID = 2,
                DepartmentName = "DENTAL"
            });
            return hospitalData;
        }
    }
    public class HospitalData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public int DepartmentID { get; set; }
        public int ConsultantID { get; set; }
        public string DepartmentName { get; set; }
    }
    public class ResourceDataSourceModel
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
        public int groupId { set; get; }
    }
    public class ConsultantDataSourceModel
    {
        public string text { set; get; }
        public int id { set; get; }
        public int groupId { set; get; }
        public string color { set; get; }
        public string designation { set; get; }
    }
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.externalDropId = new string[] { "#Schedule" };
        ViewBag.data = new KanbanDataModels().KanbanTasks();
        ViewBag.datasource = new ScheduleData().GetHospitalData();

        List<ResourceDataSourceModel> departments = new List<ResourceDataSourceModel>();
        departments.Add(new ResourceDataSourceModel { text = "GENERAL", id = 1, color = "#bbdc00" });
        departments.Add(new ResourceDataSourceModel { text = "DENTAL", id = 2, color = "#9e5fff" });
        ViewBag.Departments = departments;

        List<ConsultantDataSourceModel> consultants = new List<ConsultantDataSourceModel>();
        consultants.Add(new ConsultantDataSourceModel { text = "Alice", id = 1, groupId = 1, color = "#bbdc00", designation = "Cardiologist" });
        consultants.Add(new ConsultantDataSourceModel { text = "Nancy", id = 2, groupId = 2, color = "#9e5fff", designation = "Orthodontist" });
        consultants.Add(new ConsultantDataSourceModel { text = "Robert", id = 3, groupId = 1, color = "#bbdc00", designation = "Optometrist" });
        consultants.Add(new ConsultantDataSourceModel { text = "Robson", id = 4, groupId = 2, color = "#9e5fff", designation = "Periodontist" });
        consultants.Add(new ConsultantDataSourceModel { text = "Laura", id = 5, groupId = 1, color = "#bbdc00", designation = "Orthopedic" });
        consultants.Add(new ConsultantDataSourceModel { text = "Margaret", id = 6, groupId = 2, color = "#9e5fff", designation = "Endodontist" });
        ViewBag.Consultants = consultants;

        ViewBag.Resources = new string[] { "Departments", "Consultants" };
        return View();
    }
}