New to Kendo UI for jQuery? Start a free 30-day trial
Editing
Updated on Oct 1, 2025
The TaskBoard allows column and card editing. By default, editing in the TaskBoard is enabled for both columns and cards.
Editing Configuration
To set up editing:
- Configure the
transportand theschemadata source options of the TaskBoard - Set the
editableconfiguration (optional)
The following example demonstrates how to configure CRUD (Create, Read, Update, Destroy) data operations for columns and the cards of the TaskBoard.
<div id="taskBoard"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";
var priorities = new kendo.data.DataSource({
data: [
{ value: "urgent", text: "Urgent", color: "orange" },
{ value: "highpriority", text: "High Priority", color: "blue" },
{ value: "lowpriority", text: "Low Priority", color: "green" }
]
});
$("#taskBoard").kendoTaskBoard({
columnSettings: {
dataTextField: "Text",
dataStatusField: "Status",
dataOrderField: "Order"
},
columns: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard/columns"
},
create: {
url: crudServiceBaseUrl + "/taskboard/columns_create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/columns_update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/taskboard/columns_destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Text": { type: "string" },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
},
dataCategoryField: "Category",
dataDescriptionField: "Description",
dataTitleField: "Title",
dataStatusField: "Status",
dataOrderField: "Order",
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard"
},
create: {
url: crudServiceBaseUrl + "/taskboard/create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/taskboard/destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Category": { type: "string", defaultValue: "lowpriority" },
"Description": { type: "string" },
"Title": { type: "string", validation: { required: true } },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
},
resources: [{
field: "Category",
title: "Priority",
dataSource: priorities
}],
previewPane: {
template: "<p>#:Description#</p>" +
"<p>#:resources.Category.title#: <span style='background-color: #:resources.Category.color#'> </span> #:resources.Category.text#</p>"
},
editable: {
form: {
buttonsTemplate: "",
items: [{
field: "Title",
label: "Title:"
}, {
field: "Description",
label: "Description:"
}, {
field: "Category",
label: "Priority:",
editor: "DropDownList",
editorOptions: {
dataTextField: "text",
dataValueField: "value",
dataSource: priorities,
template: "<span style='background-color: #:color#'> </span> #:text#",
valueTemplate: "<span style='background-color: #:color#'> </span> #:text#"
}
}]
}
},
height: 750
});
</script>Configuring the Data Source
The TaskBoard uses two different data source instances for its columns and cards.
- Define the data operations in the
transportconfiguration.- Define the
idfield of the data items inschema.model.id. This ensures correct adding, editing, and deleting of items.- Define the model fields.
For more information on the DataSource schema configuration, refer to schema.model.
The following example demonstrates how to configure the data source of the columns.
js
var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";
columns: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard/columns"
},
create: {
url: crudServiceBaseUrl + "/taskboard/columns_create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/columns_update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/taskboard/columns_destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Text": { type: "string" },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
}The following example demonstrates how to configure the data source of the cards.
js
var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard"
},
create: {
url: crudServiceBaseUrl + "/taskboard/create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/taskboard/destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Category": { type: "string", defaultValue: "lowpriority" },
"Description": { type: "string" },
"Title": { type: "string", validation: { required: true } },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
}Setting the Editable Option
Editing is enabled by default, but the editable configuration exposes a number of customization options.
The following example demonstrates how to set the editable configuration.
js
editable: {
form: {
buttonsTemplate: "",
items: [{
field: "Title",
label: "Title:"
}, {
field: "Description",
label: "Description:"
}, {
field: "Category",
label: "Priority:",
editor: "DropDownList",
editorOptions: {
dataTextField: "text",
dataValueField: "value",
dataSource: priorities,
template: "<span style='background-color: #:color#'> </span> #:text#",
valueTemplate: "<span style='background-color: #:color#'> </span> #:text#"
}
}]
}
}