Custom attributes on dropdownlist items

[Gerard]

Hi,

Is it possible to set some attributes on some items in a dropdownlist?

I'm filling the list with the following server-side Razor code:

@(Html.Telerik().DropDownList().Name("theName")
    .BindTo(new SelectList(theList, "ID", "Texte"))

I'd like to change the appearance of some items in theList, based of the value of one of their properties. I would be happy if I could set a specific class name for some of the items.

[John DeVight]

Hi Gerald,

Yes, it is possible.  The HTML for the dropdownlist items is stored in the dropdownlist at:

$('#dropdownlist').data('tDropDownList').dropDown.$items

The dropdownlist items do not get created until the first time you open the dropdownlist.  So, you have to implement an event handler for the OnOpen client event and then modify each item as appropriate.

Let's say I have a DropDownList defined as follows:

@{
    Html.Telerik().DropDownList().Name("dropdownlist")
        .BindTo(new SelectList(Model, "Id", "Name"))
        .ClientEvents(e => e.OnOpen("onOpen"))
        .Render();
}

I have also defined a css class as this:

li.bold-item
{
    font-weight: bold
}

In the onOpen javascript function, I can apply the css class to each item in the list like this:

<script type="text/javascript">

    onOpen = function (e) {
        $.each($('#dropdownlist').data('tDropDownList').dropDown.$items, function (idx, item) {
            $(item).addClass('bold-item');
        });
    }

</script>

Hope this helps...

Regards,

John DeVight

[Gerard]

Hi John,

Thanks for your reply, that's quite good, I'll give it a try.

I would have prefered a server solution, though, as the items and the property I want to test are on the server. I don't want to set all the items to bold, for example, but only some of them, depending on the value of a property.

Otherwise, how would can I pass an attribute to the client for each item, that I would test to know if I have to add that class? Each item only has a value and a text.

Gérard

[John DeVight]

Hi Gerald,

The only thing I can think of is to concatenate some values together to store in the item's "Value" attribute.  For example, if I could define a model as follows:

namespace TelerikMvcGridEditingDropdown.Models
{
    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());
            }
        }
    }
}

Then in the controller, I could set the "DisplayBold" property for each Person.  Something like this:

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 });

I would then change the onOpen javascript function to this:

<script type="text/javascript">

    onOpen = function (e) {
        var dropdownlist = $('#dropdownlist').data('tDropDownList');

        $.each(dropdownlist.dropDown.$items, function (idx, item) {
            if (dropdownlist.data[idx].Value.split('|')[1] == 'True') {
                $(item).addClass('bold-item');
            }
        });
    }

</script>

Hope this helps...

Regards,

John DeVight

[Hesham Nabih]

Hi John,
If I use
combobox.dropDown.$items.addClass('test'); It works and change the css of all rows (items); is there a way to change for example item 3 and 5 only. 
Thanks