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

时间:2018-07-29 14:39:51

标签: javascript kendo-ui kendo-grid kendo-dropdown

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

编辑该行时
grid.editRow(tr);

功能,将打开“编辑”行。

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

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

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的验证消息。 由于当我在编辑模式下打开时,我正在设置dropdownlist的值。那么,即使在数据绑定事件中设置了其值,为什么还要显示验证消息。

我在这里做错什么了吗?

1 个答案:

答案 0 :(得分:0)

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

  1. 要设置输入的value attribute

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

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

    无论您最喜欢哪种方式...

  2. 要设置小部件的value初始化参数:

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

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