Kendo Dropdownlist adding style using JavaScript.

[aditya]

I have used 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" },
      { 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" },
      { 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" },
      { 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>
</body>
</html>

Thanks

[Martin]

Hello Aditya,

As per altering CSS with JavaScript, you could also take a look in jQuery documentation about how to change styles using jQuery. Here you will find a simple Dojo, which implements the above suggestion.

Concerning the second part of the question, could you please give me further details what the desired result should look like? What is the exact scenario in which you would like to change the styling of the drop-down?

I look forward to hearing from you.

Regards,
Martin
Progress Telerik

[aditya]

Thanks Martin for your reply, bellow code snippet for your reference regarding my second point. Actually i need set DropDown list  height within browser height and with any resolution for example in .k-list-scroller style i have mentioned height as 100vh here dropdown listarea height is exceeding browser height, that we need to avoid. Hence kindly suggest me any way to restrict dropdown listarea  height should not exceed browser height.

<body>
       <div id="example">
      <p>
         data: <select id="dropdownlist"></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" },
          { 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" },
          { 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" },
          { 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",
          select: function(e) {

          var x = $("#dropdownlist").data("kendoDropDownList");
             x.list.width('auto');
             x.list.height('auto');

            $('.k-list-scroller').css({
              'height': '100vh', // Height = 100vh
              'overflow-y': 'scroll',
              'overflow': 'auto'
            });
          }
      });
      });
    </script>
  </body>

 

Thanks.

[Martin]

Hello Aditya,

Thank you for the explanation. You could easily achieve this with the following CSS: 

<style>
      .k-list-scroller,
      .k-popup {
        height: calc(100vh - 58px) !important;
      }
    </style>

You can find a complete example in this Dojo demo. You can see that I am subtracting 58px from the 100vh height. That is because of the footer height of the Dojo. Otherwise the last two items of the list would not be visible.

Regards,
Martin
Progress Telerik