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

[ashutosh]

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.

[Peter Milchev]

Hello Ashutosh,

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

• https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/items;
• https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/databound;

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

• https://dojo.telerik.com/udIniviD

<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

[ashutosh]

Thanks a ton Peter. It was a great help. Cheers!