CODEWITHSUNDEEP
drop-down-menufontskendo-ui
Ashutosh Tiwari
Ashutosh Tiwari

Reputation: 3

How to create DropDownlist (Kendo UI for jquery) with list items having different font sizes

I want to create a Kendo UI (for jquery) DropDownList with a few list items such that the font size of every list item is different. Lets say there are 3 items in the DropDownList, then each of the three must show in a different font size. Is it possible?

Upvotes: 0

Views: 198

Answers (1)

dev_in_progress
dev_in_progress

Reputation: 2494

Sure, one of possibilities is to return font size in datasource.

 var data = [
    { text: "Black", value: "1", fontSize: "12px" },
    { text: "Orange", value: "2", fontSize: "18px" },
    { text: "Grey", value: "3", fontSize: "24px" }
 ];

Then use kendo DropDownList templates for valueTemplate and template:

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    valueTemplate: '<label style="font-size: #:fontSize#">#:data.text#</label>',
    template: '<label style="font-size: #:fontSize#">#:data.text#</label>',
    dataSource: data,
    index: 0,
    change: onChange
});

This is modified version of kendo example: font size per item

Upvotes: 1

Related Questions