Kendo UI for jQuery TaskBoard Overview

The Kendo UI TaskBoard allows you to easily organize items and keep track of their state. The TaskBoard provides a clean and user-friendly interface and enables you to manage tasks, notes, projects, people, or other kinds of items. The component displays columns (lanes), which can represent different types of project/task statuses. Tasks are visualized as cards, which are easily customizable through templates. You can reorder cards within the columns, or drag and drop them onto another column.

Kendo UI for jQuery Kendoka image

The TaskBoard is part of Kendo UI for jQuery, 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 initialize the TaskBoard from an existing <div> element.

    <div id="taskBoard"></div>

    <script>
        var cardsData = [
            { id: 1, title: "Campaigns", order: 1, description: "Create a new landing page for campaign", status: "todo", color: "orange" },
            { id: 2, title: "Newsletters", order: 2, description: "Send newsletter", status: "todo", color: "blue" },
            { id: 3, title: "Ads Analytics", order: 3, description: "Review ads performance", status: "todo", color: "green" },
            { id: 4, title: "SEO Analytics", order: 4, description: "Review SEO results", status: "inProgress", color: "blue" },
            { id: 5, title: "Customer Research", order: 5, description: "Interview focus groups", status: "inProgress", color: "orange" },
            { id: 6, title: "Testimonials & Case Studies", order: 6, description: "Publish new case study", status: "done", color: "green" },
            { id: 7, title: "Content", order: 7, description: "Plan content for podcasts", status: "done", color: "green" },
            { id: 8, title: "Customer Journey", order: 8, description: "Update virtual classrooms' experience", status: "done", color: "blue" },
        ];

        $("#taskBoard").kendoTaskBoard({
            columns: [
                { text: "To-Do", status: "todo" },
                { text: "In Progress", status: "inProgress" },
                { text: "Done", status: "done" }
            ],
            dataSource: {
                data: cardsData,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            order: { type: "number", defaultValue: 0 },
                            title: { field: "title", defaultValue: "No title" },
                            description: { field: "description", validation: { required: true } },
                        }
                    }
                }
            },
            dataStatusField: "status",
            dataOrderField: "order",
            dataCategoryField: "color",
            height: 750,
            resources: [
                {
                    field: "color",
                    dataSource: [
                        { value: "orange", color: "#ffa500" },
                        { value: "green", color: "#008000" },
                        { value: "blue", color: "#0000ff" }
                    ]
                }
            ]
        });
    </script>

Functionality and Features

Referencing Existing Instances

To get a reference to an existing TaskBoard instance:

  1. Use the jQuery.data() method.
  2. Once a reference is established, use the TaskBoard API to control its behavior.

    var taskBoard = $("#taskBoard").data("kendoTaskBoard");
    

See Also

In this article