Kendo UI grid popup, DropDownList validation message not being cleared - validation

Question

I'm using a DropDownList for a field that I'm editing in a Kendo UI grid popup, and though validation tooltips show up without problems, they don't disappear once the input has been corrected.
I'm creating the DropDownList like this:
function serviceDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "--- select a service ---",
dataTextField: "name",
dataValueField: "id",
dataSource: window.services, // an array I've already fetched from my DB
});
}
I apply this function to the field service_id when I define the data source, like this:
columns: [
{ field: "service_id",
title: "Service",
editor: serviceDropDownEditor,
template: "#= getServiceName(service_id) #" // display the name from the id
},
To make sure there's a place to put the validation message, I use the suggestion on this page and append a placeholder span below the DropDownList during the edit event:
edit: function(e) {
var grid = $("#grid").data("kendoGrid")
var container = grid.editable.element
var service_container= container.find("[data-container-for=service_id]")
service_container.append('<span class="k-invalid-msg", data-for="#= field #">')
},
When there's a server-side error that refers to this field (service_id), I find the placeholder that I created in the edit event and replace it with the actual message, like this:
var placeholder = container.find("[data-for=" + field + "].k-invalid-msg")
placeholder .replaceWith(validationMessageTmpl({ field: field, message: errors[field] }))
The validation message template contains the same classes and data-for attribute as the placeholder.
It works great when displaying an error for the DropDownList, but when I correct the error (and introduce another one on the same form, so the popup stays up), the original error doesn't disappear.
So... how do validation tooltips get cleared, and what do I need to do? Clear this one manually in an event?

Answer 1

Try to manually clear errors on drop down change eg:
function serviceDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "--- select a service ---",
dataTextField: "name",
dataValueField: "id",
dataSource: window.services, // an array I've already fetched from my DB
select: function (ev) {
var validatable = container.editable.validatable;
if (validatable) {
var dataItem = this.dataItem(ev.item.index());
if (dataItem === null || dataItem === undefined || dataItem.text == " " || dataItem.text == " ") {
// force validation is empty (simulate required)
validatable.validate();
} else {
// hide all error messages if not empty
validatable.hideMessages();
}
}
}
});
}