# ASP.NET MVC TaskBoard Overview The Telerik UI TaskBoard HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TaskBoard widget. The ASP.NET MVC TaskBoard allows you to easily organize items and keep track of their state. The component provides a clean and user-friendly interface and enables you to manage tasks, notes, projects, people, or other kinds of items. The TaskBoard displays columns (lanes), which can represent different types of project/task statuses. Tasks are visualized as cards, which are customizable through templates. You can reorder cards within the columns, or drag and drop them onto another column. * [TaskBoard demos](https://demos.telerik.com/aspnet-mvc/taskboard/index) ## Initializing the TaskBoard The following example demonstrates how to initialize the TaskBoard. ```Razor HtmlHelper @(Html.Kendo().TaskBoard() .Name("taskBoard") .ColumnSettings(s => { s.Width("320"); }) .Columns(c => { c.Add().Text("To-do").Status("todo"); c.Add().Text("In Progress").Status("inProgress"); c.Add().Text("Done").Status("done"); }) .DataDescriptionField("Description") .DataStatusField("Status") .DataTitleField("Title") .DataOrderField("Order") .BindTo((IEnumerable)ViewBag.Cards) .Height("750") ) ``` ```C# Controller public partial class TaskBoardController : Controller { public ActionResult Index() { ViewBag.Cards = GetCards(); return View(); } private static IList GetCards() { IList cards = new List() { new CardViewModel { ID = 1, Title = "Ads Analytics", Order = 1, Description = "Review ads performance", Status ="todo", Color= "blue" }, new CardViewModel { ID = 2, Title = "SEO Analytics", Order = 2, Description = "Review SEO results", Status ="todo", Color= "blue" }, new CardViewModel { ID = 3, Title = "Content", Order = 3, Description = "Plan content for podcasts", Status ="todo", Color= "orange" }, new CardViewModel { ID = 4, Title = "Customer Research", Order = 4, Description = "Refine feedback from user interviews", Status ="inProgress", Color= "orange" }, new CardViewModel { ID = 5, Title = "Campaigns", Order = 5, Description = "Collaborate with designers on new banners", Status ="inProgress", Color= "orange" }, new CardViewModel { ID = 6, Title = "Customer Journey", Order = 6, Description = "Review shopping cart experience", Status ="done", Color= "green" }, new CardViewModel { ID = 7, Title = "Content", Order = 7, Description = "Publish new blogpost", Status ="done", Color= "green" }, new CardViewModel { ID = 8, Title = "Post-Release Party", Order = 8, Description = "Plan new release celebration", Status ="done", Color= "blue" }, }; return cards; } } ``` ## Functionality and Features | Feature | Description | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Data Binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/binding) | The TaskBoard provides options for binding it to local and remote data. | | [Cards](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/cards) | The TaskBoard displays tasks, notes, projects, or other types of items as cards. | | [Columns](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/columns) | The TaskBoard displays cards grouped by criteria in columns (lanes). | | [Editing](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/editing) | The TaskBoard allows column and card editing. By default, editing in the TaskBoard is enabled for both columns and cards. | | [Resources](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/resources) | The component allows you to configure resources—optional metadata that can be associated with a card. | | [Search](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/search) | You can utilize a built-in search tool in the TaskBoard's toolbar that allows you to search through the cards data. | | [Templates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/templates) | You are able to control the rendering of columns, cards, and popup headers with the use of [Kendo UI Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview) or the [Template Component](https://docs.telerik.com/aspnet-mvc/html-helpers/template/overview). | | [Toolbar](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/toolbar) | The built-in toolbar of the component allows you to use existing tools or to create new custom ones. | | [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/accessibility/overview) | The TaskBoard is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. | | [Globalization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/globalization/overview) | The globalization process combines the translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support). | ## Next Steps * [Getting Started with the TaskBoard](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/getting-started) * [Basic Usage of the TaskBoard HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/taskboard) * [Data Binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/taskboard/binding) ## See Also * [Using the API of the TaskBoard for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/taskboard/api) * [Client-side API of the TaskBoard](https://docs.telerik.com/kendo-ui/api/ui/taskboard) * [Server-Side HtmlHelper API of the TaskBoard](https://www.telerik.com/aspnet-mvc/documentation/api/taskboard) * [Forum Discussions](https://www.telerik.com/forums/aspnet-mvc?tagId=1736) * [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)