# KendoUI TaskBoard

The **KendoUI TaskBoard** component allows you to easily organize items and keep track of their state and status. The TaskBoard provides a clean and user-friendly interface for managing tasks, notes, projects, people, or other kinds of items.

**Key Features**

* Columns
* Cards
* Data Binding
* Editing
* Resources
* Templates
* Search
* Validation
* Accessibility

#### Design-Time

The **kendoTaskBoard** control can be added to a Form or Page from the Visual Studio Toolbox. It should look like this when dropped onto the designer.

![Kendo TaskBoard at Design-Time](https://3428888576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGjMcybiMqaTqM3Y4vZ%2Fuploads%2FRZXYIYwjmORnjGZgmUyJ%2Fimage.png?alt=media\&token=76778493-32d5-4ede-86fd-3303dc31953b)

{% hint style="info" %}
To show data in the **kendoTaskBoard** control at design-time, the data must be provided in the **Options** property in the designer. Assigning it in the **Load** event will not render at design-time.
{% endhint %}

#### Sample Implementation

{% tabs %}
{% tab title="C#" %}

```csharp
// Code for implementing the kendoTaskBoard control on a Page.

private void kendoTaskBoard_Load(object sender, EventArgs e)
{
	this.kendoTaskBoard1.Options = new
	{
		columns = new { 
			data = new[] { 
				new { id = 1, text = "To-Do", status = "todo" },
				new { id = 2, text = "In Progress", status = "inProgress" },
				new { id = 3, text = "Done", status = "done" }
			}
		},
		dataSource = new { 
			data = JSON.Parse(File.OpenRead(Application.MapPath("Data/TaskBoard/data.json"))),
			schema = new 
			{ 
				model = new
				{
					id = "id",
					fields = new 
					{
						id = new { type = "number" },
						order = new { type = "number" },
						title = new { field = "title", defaultValue = "No title" },
						description = new { field = "description", validation = new { required = true } },
						image = new { from = "image", defaultValue = "" }
					}
				}
			}
		},
		dataOrderField = "order"
	};
}
```

{% endtab %}
{% endtabs %}

{% embed url="<https://demos.telerik.com/kendo-ui/taskboard/local-data-binding>" %}

**Runtime**

The resulting **kendoTaskBoard** control will look something like this:

![Kendo TaskBoard at Runtime](https://3428888576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGjMcybiMqaTqM3Y4vZ%2Fuploads%2F0XxbT6CYK37nVSlR0tpf%2Fimage.png?alt=media\&token=185d5b1e-4c01-494f-a8a2-d1680a9d61eb)