CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Neu
Neu

Reputation: 197

How to Chnage dropdownlist value style based on it's value?

I am using Kendo UI in Asp.net Webforms. I am in a situation where I need to differentiate data that is coming from tables. I want to differentiate the styles of each value based on data.

Example 

Value	                              |PrimaryOwnerId
_______________________________________________________________________
EVP-RP&P	                          |  False
Execution Coordinator	                  |  False
Inspection Lead	                          |  False
Instrument, Electrical, and Analyzer      |  False
Logistics	                          |  True
Operations	                          |  False
Planning	                          |  True

this table I'm binding with kendo dropdown and whatever values have primaryownerId false I want to apply bold font style and other need to be Italic fonts.

function loadValues(PrimaryOwners1, PrimaryOwners2) {
    $("#lstPOwner1").kendoDropDownList({
        dataSource: PrimaryOwners1,
        dataTextField: "text",
        dataValueField: "value",
        change: function () {
            disablecontrol(this.value(), "#btnFilter1")
        }
    });
}

This are the data I am binding with the dropdownlist

Please, can anyone help?

Upvotes: 0

Views: 450

Answers (1)

VladaxLe
VladaxLe

Reputation: 321

You can use kendo templates to achive this

var data = [
  {flag: true, value: 'test1'},
  {flag: false, value: 'test2'},
  {flag: true, value: 'test3'},
  {flag: false, value: 'test4'}
]

$('#dropdownlist').kendoDropDownList({
  dataSource: data,
  dataTextField: "value",
  template: '<span style="#= flag ? "font-weight:bold" : "font-style:italic" #">#:value#</span>'
});

Try it in dojo https://dojo.telerik.com/AKAteWoY/2

Upvotes: 1

Related Questions