CODEWITHSUNDEEP
jquerycsskendo-uikendo-dropdown
Chris
Chris

Reputation: 3129

KendoUI Dropdownlist loses data when changing border color

I have ran into an issue when changing the input border color of a kendo dropdownlist on a button click. When I click on the button the input border goes red, as it should, but all the data is missing from the dropdown.

Any idea's on why I am losing the data for the dropdown when I click the button?

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

Upvotes: 0

Views: 700

Answers (1)

David Shorthose
David Shorthose

Reputation: 4497

This is a simple issue to fix.

When you are calling the dropdownlist in the button click you are resetting the control so it doesn't have the datasource etc that you applied to it prior to the reset. Just change the calling line to this: 

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

from this: 

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

I have provided a dojo for you to see it working. http://dojo.telerik.com/usehOGiS

Upvotes: 2

Related Questions