Search code examples
javascriptjquerycsskendo-uikendo-asp.net-mvc

Kendo Dropdownlist adding style using JavaScript

I have used Jquery Kendo Dropdownlist , to display information in list. Here my requirement is to add the bellow mention styles i.e. (.k-list-container and .k-list-scroller ) to Dropdownlist using JavaScript.

And make the height of ".k-list-scroller" dynamic i.e. the drop down list-area when selected, the height of it, should go beyond screen height or window height. In this case i have hard coded (height: 500px !important;).

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

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

The bellow code example is for reference -

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

Thanks.

Solution

  • You can add a class to the element created by $("#local").kendoDropDownList({}). The created element has an id with a "-list" post-fix.

    See the snippet for a demo:

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