Блог

Главная - Вопросы по программированию - Выпадающий список Kendo, добавляющий стиль с помощью JavaScript

Выпадающий список Kendo, добавляющий стиль с помощью JavaScript

#javascript #jquery #css #kendo-ui #kendo-asp.net-mvc

#javascript #jquery #css #kendo-пользовательский интерфейс #kendo-asp.net-mvc

Вопрос:

Я использовал выпадающий список Jquery Kendo для отображения информации в списке. Здесь мое требование состоит в том, чтобы добавить приведенные ниже стили упоминания, т. Е. (.k-list-container и .k-list-scroller ) в выпадающий список, используя 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. Пожалуйста, укажите, какой тип пользовательского интерфейса Kendo вы используете (он же jQuery или Angular)

Ответ №1:

Вы можете добавить класс к элементу, созданному $("#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>