2013-05-09 59 views
0

我在一个Kendo UI网格弹出窗口中编辑的字段使用了DropDownList,虽然验证工具提示没有出现问题,但它们不会消失一次输入已被更正。Kendo UI网格弹出窗口,DropDownList验证消息没有被清除

我创建像这样的DropDownList:

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 
     }); 
    } 

我这个函数应用于该领域service_id当我定义数据源,如:

columns: [ 
    { field: "service_id", 
     title: "Service", 
     editor: serviceDropDownEditor, 
     template: "#= getServiceName(service_id) #" // display the name from the id 
    }, 

要确保有一个放置验证消息,我使用the suggestion on this page并在edit事件期间在DropDownList下面附加占位符跨度:

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 #">') 
    }, 

当有引用该字段(service_id)的服务器端错误,我发现我在edit事件创建,并与实际的消息取代它,这样的占位符:

var placeholder = container.find("[data-for=" + field + "].k-invalid-msg") 
placeholder .replaceWith(validationMessageTmpl({ field: field, message: errors[field] })) 

的验证消息模板包含与占位符相同的类和data-for属性。

它为DropDownList显示错误时效果很好,但当我纠正错误(并在同一表单上引入另一个表单时,所以弹出窗口保持不变)时,原始错误不会消失。

那么...验证工具提示如何清除,以及我需要做什么?在事件中手动清除这一个?

回答

0

尝试在下拉变化如手动清除错误:

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(); 
         } 
        } 
       } 
    }); 

}