更改边框颜色时，kendoui下拉列表会丢失数据

Question

我在单击按钮上更改kendo dropdownlist的输入边框颜色时遇到了问题。当我单击按钮时，输入边框会变红，但是下拉列表中缺少所有数据。

单击按钮时，我为什么会丢失下拉的数据的想法？

$(document).ready(function() {
  $('#btn').on('click', function() {
    var dd = $('#myColor').kendoDropDownList().data("kendoDropDownList");
    dd.wrapper.find(".k-input").css("border", "2px solid red");
  });
  var data = [{
      text: "Select ",
      value: "0"
    },
    {
      text: "Black",
      value: "1"
    },
    {
      text: "Orange",
      value: "2"
    },
    {
      text: "Grey",
      value: "3"
    }
  ];
  // create DropDownList from input HTML element
  $("#myColor").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="myColor" class="control-label col-lg-2 col-sm-4">Color</label>
  <div class="col-lg-10 col-sm-8">
    <input id="myColor" class="form-control" placeholder="Color" name="myColor" style="max-width:75%;" />
  </div>
</div>
<div class="form-group">
  <button id='btn' class='btn btn-success'> Click </button>
</div>

Answer 1

这是一个简单的解决问题。

当您在按钮单击中调用下拉列表时，您将重置控件，以便在重置之前没有数据源等。只需将通话线更改为：

 var dd = $('#myColor').data("kendoDropDownList");

由此：

var dd = $('#myColor').kendoDropDownList().data("kendoDropDownList");

我为您提供了一个Dojo，可以看到它有效。http://dojo.telerik.com/usehogis