kendoDropDownList 在编辑模式下保留值并验证

Question

我在 kendogrid 中使用 kendoDropDownList。现在，当我通过调用

编辑该行时

grid.editRow(tr);

函数，打开行进行编辑。

它在编辑模式下显示 kendoDropDownList，但无法保留原始值。

我尝试使用数据绑定事件 select 原始值

let input = $('<input name= "' + options.field + '" required = "required"/>');
    input.attr('id', options.field);
    input.attr('data-text-field', 'Name');
    input.attr('data-value-field', 'Name');
    input.attr('data-bind', 'value:' + options.field);
    input.width(container.width());
    input.appendTo(container);
    input.kendoDropDownList({
      autoBind: false,
      dataTextField: 'Name',
      dataValueField: 'Name',
      optionLabel: 'Select',
      dataBound: (e) => {
        $('#' + options.field).data('kendoDropDownList').value(options.model.dropDownValue) ;
      },
      dataSource: {
        data: this.list,
        schema: {
          data: 'value'
        }
      }
    });

如果我不这样做，只需调用验证

$('#grid').kendoValidator().data('kendoValidator').validate();

它向我显示了 kendoDropDownList 的验证消息。因为当我在编辑模式下打开时，我正在设置下拉列表的值。那么为什么它显示验证消息，即使它的值是在数据绑定事件中设置的。

我是不是做错了什么？

Answer 1

我认为问题在于您根本没有在输入中设置任何值。至少有两种方法可以设置小部件的值，而无需执行您在 dataBound:

中所做的操作

设置输入的value attribute：

$('<input name= "' + options.field + '" required = "required" value="' + options.model.dropDownValue + '" />');

或

input.attr('value', options.model.dropDownValue);

任何你喜欢的方式...

设置小部件的value初始化参数：

input.kendoDropDownList({
    value: options.model.dropDownValue
    ...

我看到您已经设置了 input.attr('data-bind', 'value:' + options.field);，但我不确定这是否应该设置小部件的初始值或仅在更改大小写时设置。但上述选项之一应该适合您。

kendoDropDownList 在编辑模式下保留值并验证

kendoDropDownList in edit mode to retain the value and validate

javascript

kendo-ui

kendo-grid

kendo-dropdown