TaskBoard TagHelper Overview

The Telerik UI TaskBoard TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI TaskBoard widget.

The 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, and they can be reordered within the same column, or dragged and dropped onto another column.

Telerik UI for ASP.NET Core Ninja image

The TaskBoard is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the TaskBoard

The following example demonstrates how to define the TaskBoard by using the TaskBoard TagHelper.

  <kendo-taskboard name="taskBoard"></kendo-taskboard>

Basic Configuration

The TaskBoard TagHelper configuration options are passed as attributes of the tag. The TaskBoard uses the DataSource tag helper to bind its data.

<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>
@(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")
)

Functionality and Features

Referencing Existing Instances

To get a reference to an existing TaskBoard instance, use the jQuery.data() method. Once a reference is established, use the TaskBoard client-side API to control its behavior.

    $(document).ready(function() {
        // The Name() of the TaskBoard is used to get its client-side instance.
        var taskBoard = $("#taskBoard").data("kendoTaskBoard");
    });

See Also

In this article
Not finding the help you need? Improve this article