Kanban

The Sortable widget allows users to reorder elements using drag-and-drop. In this demo, two different Sortables are used. You can identify them in the code by the class attribute:

sortable-lists
This Sortable allows users to reorder card lists. The widget nests <div> elements that represent the lists. The handle option specifies that lists can be dragged by their titles. To correctly animate items being reordered, Sortable requires the item orientation. The itemOrientation option is set to "horizontal" because card lists are orientated horizontally.
sortable-cards
This Sortable allows users to reorder cards. The widget nests <div> elements that represent all cards in a specific list. All Sortables are added to the same group to allow users to move cards between lists.

In addition to Sortable, this kanban board implementation uses the ScrollView widget. The widget's instance with the scrollable-board class allows you to scroll the board left to right. The widget's instance with the scrollable-list class makes lists scrollable.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

ASP.NET MVC

@model DevExtreme.MVC.Demos.ViewModels.KanbanViewModel @using DevExtreme.MVC.Demos.Models.TreeList; <div id="kanban"> @(Html.DevExtreme().ScrollView() .ElementAttr("class", "scrollable-board") .Direction(ScrollDirection.Horizontal) .ShowScrollbar(ShowScrollbarMode.Always) .Content( Html.DevExtreme().Sortable() .ElementAttr("class", "sortable-lists") .ItemOrientation(Orientation.Horizontal) .MoveItemOnDrop(true) .Handle(".list-title") .Content(@<text> @foreach(var status in Model.Statuses) { @CreateList(status, Model.Tasks.Where(t => t.Task_Status == status)) } </text>).ToString() ) ) </div> @helper CreateList(string status, IEnumerable<EmployeeTask> tasks) { <div class="list"> <div class="list-title dx-theme-text-color">@status</div> @(Html.DevExtreme().ScrollView() .ElementAttr("class", "scrollable-list") .Direction(ScrollDirection.Vertical) .ShowScrollbar(ShowScrollbarMode.Always) .Content( Html.DevExtreme().Sortable() .ElementAttr("class", "sortable-cards") .ItemOrientation(Orientation.Vertical) .MoveItemOnDrop(true) .Group("tasksGroup") .Content(@<text> @CreateCards(tasks) </text>).ToString() ) ) </div>} @helper CreateCards(IEnumerable<EmployeeTask> tasks) { foreach(var task in tasks) { <div class="card dx-card dx-theme-text-color dx-theme-background-color"> <div class="card-priority priority-@((int)task.Task_Priority + 1)"></div> <div class="card-subject">@task.Task_Subject</div> <div class="card-assignee">@Model.Employees.Where(e => e.ID == task.Task_Assigned_Employee_ID).FirstOrDefault().Name</div> </div> } }

using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SortableController : Controller { public ActionResult Kanban() { return View(new KanbanViewModel { Tasks = SampleData.EmployeeTasks, Statuses = new string[] { "Not Started", "Need Assistance", "In Progress", "Deferred", "Completed" }, Employees = SampleData.TaskEmployees }); } } }

#kanban { white-space: nowrap; } .list { border-radius: 8px; margin: 5px; background-color: rgba(192, 192, 192, 0.4); display: inline-block; vertical-align: top; white-space: normal; } .list-title { font-size: 16px; padding: 10px; padding-left: 30px; margin-bottom: -10px; font-weight: bold; cursor: pointer; } .scrollable-list { height: 400px; width: 260px; } .sortable-cards { min-height: 380px } .card { position: relative; background-color: white; box-sizing: border-box; width: 230px; padding: 10px 20px; margin: 10px; cursor: pointer; } .card-subject { padding-bottom: 10px; } .card-assignee { opacity: 0.6; } .card-priority { position: absolute; top: 10px; bottom: 10px; left: 5px; width: 5px; border-radius: 2px; background: #86C285; } .priority-1 { background: #ADADAD; } .priority-2 { background: #86C285; } .priority-3 { background: #EDC578; } .priority-4 { background: #EF7D59; }