Kendo Dropdownlist adding style using JavaScript.

4 posts, 1 answers
  1. aditya
    aditya avatar
    4 posts
    Member since:
    Nov 2018

    Posted 29 Mar Link to this post

    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

  2. Martin
    Admin
    Martin avatar
    36 posts

    Posted 02 Apr Link to this post

    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.
  3. aditya
    aditya avatar
    4 posts
    Member since:
    Nov 2018

    Posted 02 Apr in reply to Martin Link to this post

    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.

  4. Answer
    Martin
    Admin
    Martin avatar
    36 posts

    Posted 04 Apr Link to this post

    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.
Back to Top