Question

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

并动态设置“ .k-list-scroller”的高度，即选中的下拉列表区域的高度应超过屏幕高度或窗口高度。在这种情况下，我进行了硬编码（高度：500px！important;）。

.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>

谢谢。

Answer 1

您可以将类添加到$("#local").kendoDropDownList({})创建的元素中。创建的元素的ID带有后缀“ -list”。

请参阅代码段以进行演示：

<!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>

Kendo Dropdownlist使用JavaScript添加样式

1 个答案: