Question

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

我在点击按钮时输入下拉列表数据的原因有什么想法？

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

Answer 1

这是一个需要修复的简单问题。

当您在按钮中调用下拉列表时，您将重置控件，以便它在重置之前没有您应用于它的数据源等。只需将调用行更改为：

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

来自：

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

我为你提供了一个道场，让它看起来有效。 http://dojo.telerik.com/usehOGiS

更改边框颜色时，KendoUI Dropdownlist会丢失数据

1 个答案: