My ASP.NET MVC-3 application is using the previous version of Telerik MVC Extensions combobox. I am trying to change the style of an item in the list.
Here is the model:
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public bool DisplayBold { get; set; }
public string Value
{
get
{
return string.Format("{0}|{1}", this.Id, this.DisplayBold.ToString());
}
}
}
The Controller:
var people = new List<Person>();
people.Add(new Person { Id = 1, Name = "John Doe", DisplayBold = true });
people.Add(new Person { Id = 2, Name = "Jayne Doe", DisplayBold = false });
ViewData["people"] = people;
return View();
The Combobox:
<% Html.Telerik().ComboBox()
.Name("ComboBox")
.BindTo(new SelectList((IEnumerable<Person>)ViewData["people"], "Id", "Name"))
.ClientEvents(events => events
.OnChange("ComboBox_onChange")
.OnLoad("ComboBox_onLoad")
.OnOpen("ComboBox_OnOpen"))
.Render();
%>
I tried the following and it did change the first item:
var item = combobox.dropDown.$items.first();
item.addClass('test');
However when I tried to change the CSS when it is Ture:
var combobox = $(this).data('tComboBox');
$.each(combobox.dropDown.$items, function (idx, item) {
if (combobox.data[idx].Value.split('|')[1] == 'True') {
alert(item);
$(item).addClass('test');
}
});
It did not work!
While i was rewriting my previous answer and browsing the forums user373721 marked my old revision as answered.
I am sorry i searched the forum of telerik to see how you could hook into the databinding to influence the css. I could not find a good match to your problem.
One muddy workaround (getting desperated here) could be to add html to the names that should be displayed bold:
public class Person
{
public string NameText { get; }
{
get
{
if(this.DisplayBold) {
return "<b>" + this.Name + "</b>";
} else
return this.Name;
}
}
}
So instead of binding to Name you would bind to NameText. You may need to take care of html-conversion.
In my last search i found a post that may help. And now i found a post that could be from you