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

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.

Sample Implementation

C#

// 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"
	};
}

Binding to local data in jQuery TaskBoard Widget Demo | Kendo UI for jQuery

Runtime

The resulting kendoTaskBoard control will look something like this:

Kendo TaskBoard at Runtime