How can I make Kendo Drop Down List to Case Insensitive

Question

I want to set a value to a kendo drop down list irrespective to it's case.

For an example following code is working fine.

$("#color").data("kendoDropDownList").value("Grey");

I need it to work for following code too:

$("#color").data("kendoDropDownList").value("grey");

(function() {
  var data = [{
    text: "Black",
    value: "Black"
  }, {
    text: "Orange",
    value: "Orange"
  }, {
    text: "Grey",
    value: "Grey"
  }];

  // create DropDownList from input HTML element
  $("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0
  });

  var color = $("#color").data("kendoDropDownList");
  color.value("Grey");
})();

<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.all.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

<input id="color" value="1" style="width: 100%;" />

Please view the fiddle for better understanding: https://jsfiddle.net/Hd47F/329/

Answer 1

Looking at the docs, it makes sense that this is not working as you'd expect. You are trying to set the value, not filter the drop down list. The ignoreCase property only applies to filtering and setting the value requires exact-case from what I can see.

Instead of using value() to set the value, try using search() as below.

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data, // using your same data as above
    index: 0
  });

var color = $("#color").data("kendoDropDownList");
color.search("grey"); // This now works regardless of casing

You can see my example here: http://dojo.telerik.com/ewEyoC