This is a migrated thread and some comments may be shown as answers.

Kendo Dropdownlist adding style using JavaScript.

3 Answers 531 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
aditya
Top achievements
Rank 1
aditya asked on 29 Mar 2019, 11:28 PM

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

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 02 Apr 2019, 07:46 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
aditya
Top achievements
Rank 1
answered on 02 Apr 2019, 10:09 PM

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.

0
Accepted
Martin
Telerik team
answered on 04 Apr 2019, 11:06 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
aditya
Top achievements
Rank 1
Answers by
Martin
Telerik team
aditya
Top achievements
Rank 1
Share this question
or