kendoDropDownList in edit mode to retain the value and validate

Question

I am using kendoDropDownList in a kendogrid. Now when I edit that row by calling

grid.editRow(tr);

function, row opens for Edit.

Its shows kendoDropDownList in edit mode but its not able to retain the original value.

I tried using databound event to select original value

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

If I dont this and just call validate

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

It shows me validation message for kendoDropDownList. Since when I open in edit mode, I am setting value of dropdownlist. So why its showing validation message even if its value is set in databound event.

Am I doing something wrong here?

Answer 1

I think the problem is that you didn't set any value at all in your input. There are at least two ways to set the widget's value without need to do what you did in the dataBound:

1. To set the value attribute of the input:

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

   or

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

   Whatever the way you like the most...

2. To set the widget's value initialization parameter:

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

I see that you have set input.attr('data-bind', 'value:' + options.field); but I'm not sure if this should set the widget's initial value or just on change case, though. But one of those options above should work for you.