Drop down list with each list item with different font size?

3 posts, 0 answers
  1. ashutosh
    ashutosh avatar
    2 posts
    Member since:
    Aug 2011

    Posted 29 Feb Link to this post

    I want to create a dropdownlist named 'font size' that helps a user select font size out of the values lets say 12 pt, 14 pt, 16 pt....and so on.

    These list items should not all appear with the same font size but should rather appear with a font size they represent. For example - 12 pt must show in 12 pt size, 14 pt in 14 pt size and so on.

     

    Is it possible to show different list items in a dropdownlist in different font sizes? If yes, then how?

     

    Thanks  in anticipation.

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    782 posts

    Posted 03 Mar Link to this post

    Hello Ashutosh,

    The dropdown elements can be accessed via the .items() method of the DropDownList:

    Then, in the dataBound event, you can iterate over all the items and set their font-size as demonstrated in the following dojo:

    <select id="size" style="width: 100%;" >
      <option>12 pt</option>
      <option>14pt</option>
      <option>20 pt</option>
      <option>32 pt</option>
    </select>
    
    <script>
      $(document).ready(function() {
    
        // create DropDownList from select HTML element
        $("#size").kendoDropDownList({
          dataBound:function(ev){
            var ddl = ev.sender;
            var items = ddl.items();
            for (var i=0; i<items.length; i++)
            {
              var item = items[i];
              var size = $(item).text().trim().replace(" ", "");
    
              item.style.fontSize = size;
            }
          }
        });
      });
    </script>

    Regards,
    Peter Milchev
    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. ashutosh
    ashutosh avatar
    2 posts
    Member since:
    Aug 2011

    Posted 03 Mar in reply to Peter Milchev Link to this post

    Thanks a ton Peter. It was a great help. Cheers!
Back to Top