0

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
    },

検証メッセージを配置する場所があることを確認するために、このページの提案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 のエラーを表示する場合はうまく機能しますが、エラーを修正すると (同じフォームに別のエラーを導入すると、ポップアップが表示されたままになります)、元のエラーは消えません。

では...検証ツールチップはどのようにクリアされますか?また、何をする必要がありますか? イベントでこれを手動でクリアしますか?

4

1 に答える 1

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

}

于 2013-06-28T11:40:34.443 に答える