Search code examples
javascriptasp.net-mvc-3comboboxtelerik-mvc

Telerik MVC, Combobox changing the CSS of an item


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!


Solution

  • This is the version after user373721 marked this as answered

    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

    • By the way in the forums i have read that there were several bug fixes that could be important for your goal. Which telerik mvc-release are you using?