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

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

2 Answers 97 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
ashutosh
Top achievements
Rank 1
ashutosh asked on 29 Feb 2020, 06:42 AM

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 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 03 Mar 2020, 01:07 PM

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.
0
ashutosh
Top achievements
Rank 1
answered on 04 Mar 2020, 04:43 AM
Thanks a ton Peter. It was a great help. Cheers!
Tags
DropDownList
Asked by
ashutosh
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
ashutosh
Top achievements
Rank 1
Share this question
or