Kendo UI Dropdownlist无法显示正确的值

时间:2019-03-21 01:24:58

标签: kendo-ui kendo-grid kendo-dropdown kendo-datasource

我遇到了这样的情况,我的下拉列表应该应该基于我的userPropertyID=3显示GUEST HOUSE,但是不知何故它在下拉列表中仍然没有显示正确的值。需要您的帮助,谢谢您的宝贵时间。

  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>

1 个答案:

答案 0 :(得分:1)

发生这种情况是因为您没有将正确的剑道小部件分配给变量。因此它不知道剑道的功能。

正确的方法是这样(通过使用.data('kendoDropDownList'))

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

因此,在您的情况下,您需要将代码部分更改为此。

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

但是请记住,索引从0开始(我在您的代码中看到,在索引3处,您再次将HOME的值与索引0的值相同,所以不要对此感到困惑)。

现在调用 .value()函数将起作用

dropdownlist.select(userPropertyID - 1);

最终,如果即使在真正的应用程序中创建小部件后立即设置值,也可以使用value属性对其进行设置

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

编辑:为使内容完整,这是修改后的代码段

  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>