Kendo UI Dropdownlist not display correct value

Question

I had a situation like this, my dropdownlist supposedly it should display GUEST HOUSE based on my userPropertyID=3 but somehow it still not display the right value in dropdownlist. Need your help, thank you for your time.

  var userPropertyID = 3;

  var propertyTBL = [
  {"propertyID":"1","propertyName":"HOTEL"},
  {"propertyID":"2","propertyName":"RESORT"},
  {"propertyID":"3","propertyName":"GUEST HOUSE"},
  {"propertyID":"4","propertyName":"HOME"},
  {"propertyID":"5","propertyName":"MOTEL"}];

  
  var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
  });
  dropdownlist.select(userPropertyID);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>

</body>
</html>

Alag · Accepted Answer · 2019-03-21 08:10:23Z

This happens because you didn't assign correct kendo widget into variable. So it doesn't know kendo's functions.

Correct way would be this (by using .data('kendoDropDownList'))

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

so in your case, you need change your part of code to this.

var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
}).data('kendoDropDownList');

But remember that indexing starts at 0 (I see in your code, that at index 3, you have again value HOME as is at index 0, so don't get confused by that).

Now calling .value() function will work

dropdownlist.select(userPropertyID - 1);

Eventually, if you set value immediately after you create widget even in your real application, you can use value property to set it up

var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL,
    value: userPropertyID
}).data('kendoDropDownList');

EDIT: To make it complete, here is your modified code snippet

  var userPropertyID = 3;

  var propertyTBL = [
  {"propertyID":"1","propertyName":"HOTEL"},
  {"propertyID":"2","propertyName":"RESORT"},
  {"propertyID":"3","propertyName":"GUEST HOUSE"},
  {"propertyID":"4","propertyName":"HOME"},
  {"propertyID":"5","propertyName":"MOTEL"}];

  
  var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
  }).data('kendoDropDownList');
  dropdownlist.select(userPropertyID - 1);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>

</body>
</html>

Thank you for that, obliviously I need to read the documentation more.

Collectives™ on Stack Overflow

Kendo UI Dropdownlist not display correct value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related