# ASP.NET Core TaskBoard Overview

The Telerik UI TaskBoard TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TaskBoard widget. To add the component to your ASP.NET Core app, you can use either.

The ASP.NET Core 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-core/taskboard/index)

## Initializing the TaskBoard

The following example demonstrates how to initialize the TaskBoard.

```Razor HtmlHelper
    @(Html.Kendo().TaskBoard<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel, Kendo.Mvc.Examples.Models.TaskBoard.Column>()
        .Name("taskBoard")
        .ColumnSettings(columnSettings => columnSettings
            .DataTextField("Text")
            .DataStatusField("ID")
        )
        .Columns(dataSource => dataSource
            .Ajax()
            .Read("Editing_Columns_Read", "TaskBoard")
            .Create("Editing_Columns_Create", "TaskBoard")
            .Update("Editing_Columns_Update", "TaskBoard")
            .Destroy("Editing_Columns_Destroy", "TaskBoard")
        )
        .DataTitleField("Title")
        .DataStatusField("OwnerID")
        .DataDescriptionField("Description")
        .DataCategoryField("ID")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.TaskID))
            .Read(read => read.Action("Tasks_Read", "TaskBoard"))
            .Create(update => update.Action("Tasks_Create", "TaskBoard"))
            .Update(update => update.Action("Tasks_Update", "TaskBoard"))
            .Destroy(update => update.Action("Tasks_Destroy", "TaskBoard"))
        )
        .Height("750")
    )
```

```Razor TagHelper
    <kendo-taskboard name="taskBoard" datatitlefield="title" datastatusfield="OwnerID" datadescriptionfield="Description" datacategoryfield="ID" height="750">
        <datasource>
            <transport>
                <read url="@Url.Action("Tag_Helper_Tasks_Read", "TaskBoard")" />
                <create url="@Url.Action("Tag_Helper_Tasks_Create", "TaskBoard")" />
                <update url="@Url.Action("Tag_Helper_Tasks_Update", "TaskBoard")" />
                <destroy url="@Url.Action("Tag_Helper_Tasks_Destroy", "TaskBoard")" />
            </transport>
            <schema data="Data" total="Total" errors="Errors">
                <model id="TaskID">
                    <fields>
                        <field name="TaskID" type="number"></field>
                        <field name="title" from="Title" type="string"></field>
                        <field name="Description" from="Description" type="string"></field>
                        <field name="OwnerID" type="number" default-value="0"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
        <column-settings datatextfield="Text" datastatusfield="ID">
        </column-settings>
        <taskboard-columns>
            <datasource>
                <transport>
                    <read url="@Url.Action("Tag_Helper_Columns_Read", "TaskBoard")" />
                    <create url="@Url.Action("Tag_Helper_Columns_Create", "TaskBoard")" />
                    <update url="@Url.Action("Tag_Helper_Columns_Update", "TaskBoard")" />
                    <destroy url="@Url.Action("Tag_Helper_Columns_Destroy", "TaskBoard")" />
                </transport>
                <schema data="Data" total="Total" errors="Errors">
                    <model id="ID">
                        <fields>
                            <field name="ID" type="number"></field>
                            <field name="Text" from="Text" type="string"></field>
                        </fields>
                    </model>
                </schema>
            </datasource>
        </taskboard-columns>
    </kendo-taskboard>
```

## Functionality and Features

| Feature                                                                                                                             | Description                                                                                                                                                                                                                                                                       |
| ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Data Binding](https://www.telerik.com/aspnet-core-ui/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-core-ui/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-core-ui/documentation/html-helpers/data-management/taskboard/columns)                      | The TaskBoard displays cards grouped by criteria in columns (lanes).                                                                                                                                                                                                              |
| [Editing](https://www.telerik.com/aspnet-core-ui/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-core-ui/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-core-ui/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-core-ui/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-core/html-helpers/template/overview). |
| [Toolbar](https://www.telerik.com/aspnet-core-ui/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-core-ui/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-core-ui/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-core-ui/documentation/html-helpers/data-management/taskboard/getting-started)

* [Basic Usage of the TaskBoard HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/taskboard)

* [Basic Usage of the TaskBoard TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/taskboard/tag-helper)

* [TaskBoard in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/taskboard/razor-page)

* [Data Binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/taskboard/binding)

## See Also

* [Using the API of the TaskBoard for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/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-core-ui/documentation/api/taskboard)

* [Server-Side TagHelper API of the TaskBoard](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/taskboard)

* [Forum Discussions](https://www.telerik.com/forums/aspnet-core-ui?tagId=1735)

* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)