Kendo Dropdownlist добавление стиля с использованием JavaScript - PullRequest
Новая
       17

Kendo Dropdownlist добавление стиля с использованием JavaScript

3 голосов
/ 30 марта 2019

Я использовал выпадающий список Jquery Kendo для отображения информации в списке.Здесь мое требование состоит в том, чтобы добавить нижеприведенные стили упоминания, т.е. (.k-list-container и .k-list-scroller) в Dropdownlist, используя JavaScript.

и сделать высоту ".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>

Спасибо.

1 Ответ

0 голосов
/ 31 марта 2019

Вы можете добавить класс к элементу, созданному $("#local").kendoDropDownList({}).Созданный элемент имеет идентификатор с пост-исправлением "-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>
...