CODEWITHSUNDEEP
validationkendo-uikendo-grid
Mark Westling
Mark Westling

Reputation: 5974

Kendo UI grid popup, DropDownList validation message not being cleared

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?

Upvotes: 0

Views: 4284

Answers (1)

Marcin
Marcin

Reputation: 3262

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 == "&nbsp;") {
                            // force validation is empty (simulate required)
                            validatable.validate();
                        } else {
                        // hide all error messages if not empty
                            validatable.hideMessages();
                        }
                    }
                }
  });

}

Upvotes: 0

Related Questions