Kendo Dropdownlist 使用 JavaScript 添加样式答案

【问题标题】：Kendo Dropdownlist adding style using JavaScriptKendo Dropdownlist 使用 JavaScript 添加样式
【发布时间】：2019-03-29 23:58:04
【问题描述】：

我使用 Jquery Kendo Dropdownlist 来显示列表中的信息。在这里，我的要求是使用 JavaScript 将下面提到的样式（即（.k-list-container 和 .k-list-scroller）添加到 Dropdownlist。

并使“.k-list-scroller”的高度动态化，即选择下拉列表区域时，它的高度应超出屏幕高度或窗口高度。在这种情况下，我进行了硬编码（高度：500 像素！重要；）。

.k-list-container{
    width:  auto !important;
    height: auto !important;
}

.k-list-scroller{
  height: 500px !important;
  overflow-y: scroll !important;
}

以下代码示例供参考-

 <style>
  .k-list
  {
    white-space: nowrap;
  }
  .k-list-container{
        width:  auto !important;
        height: auto !important;
    }
    .k-list-scroller{
      height: 500px !important;
      overflow-y: scroll !important;
    }
</style>
<div id="example">
    <p>
     data: <select id="local"></select>
  </p>
</div>
<script>
  $(function() {
    var data = [
      { text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
      { text: "Black 1", value: "1" },
      { text: "Orange 2", value: "2" },
      { text: "Black 3", value: "3" },
      { text: "Orange 4", value: "4" },
      { text: "Black 5", value: "5" },
      { text: "Orange 6", value: "6" },
      { text: "Black 7", value: "7" },
      { text: "Orange 8", value: "8" },
      { text: "Black 9", value: "9" },
      { text: "Orange 10", value: "10" },
      { text: "Black 11", value: "11" },
      { text: "Orange 12", value: "12" }
    ];

    $("#local").kendoDropDownList({
      dataTextField: "text",
      dataValueField: "value",
      dataSource: data,

    });
    });
</script>

谢谢。

【问题讨论】：

请说明您使用的是哪种 Kendo UI（又名 jQuery 或 Angular）

标签： javascript jquery css kendo-ui kendo-asp.net-mvc

【解决方案1】：

您可以为$("#local").kendoDropDownList({}) 创建的元素添加一个类。创建的元素有一个带有“-list”后缀的 id。

查看 sn-p 以获得演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

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

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
  
  <style>
    #dropdownlist-list.test-class .k-list {
      white-space: nowrap;
    }
  
    #dropdownlist-list.test-class .k-list-container {
      width:  auto !important;
      height: auto !important;
    }
    
    #dropdownlist-list.test-class .k-list-scroller {
      //height: 500px !important; // Causes a UI glitch
      overflow-y: scroll !important;
    }
  </style>
  
</head>
<body>
  <button onclick="testFunction()">Test Button</button>
  <br>

  <input id="dropdownlist" />
  
<script>
  var data = [
      { text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
      { text: "Black 1", value: "1" },
      { text: "Orange 2", value: "2" },
      { text: "Black 3", value: "3" },
      { text: "Orange 4", value: "4" },
      { text: "Black 5", value: "5" },
      { text: "Orange 6", value: "6" },
      { text: "Black 7", value: "7" },
      { text: "Orange 8", value: "8" },
      { text: "Black 9", value: "9" },
      { text: "Orange 10", value: "10" },
      { text: "Black 11", value: "11" },
      { text: "Orange 12", value: "12" }
    ];

  $("#dropdownlist").kendoDropDownList({
    dataSource: data,
    dataTextField: "text",
    dataValueField: "value"
  });
  
  function testFunction() {
    $("#dropdownlist-list").addClass("test-class");
  }
</script>
</body>
</html>

【讨论】：