Kendo UI 下拉列表在更改边框颜色时丢失数据

Question

单击按钮更改 kendo 下拉列表的输入边框颜色时，我遇到了运行问题。当我单击按钮时，输入边框会变成红色，这是应该的，但是下拉列表中的所有数据都丢失了。

知道为什么我在单击按钮时丢失了下拉列表的数据吗？

$(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

Kendo UI 下拉列表在更改边框颜色时丢失数据

KendoUI Dropdownlist loses data when changing border color

jquery

css

kendo-ui

kendo-dropdown