This is a migrated thread and some comments may be shown as answers.
Custom attributes on dropdownlist items
4 Answers 82 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Gerard
Top achievements
Rank 1
Gerard asked on 18 Jan 2012, 09:54 AM
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.

4 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 18 Jan 2012, 07:34 PM
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

0
Gerard
Top achievements
Rank 1
answered on 18 Jan 2012, 07:52 PM
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

0
John DeVight
Top achievements
Rank 1
answered on 18 Jan 2012, 08:37 PM
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
0
Hesham Nabih
Top achievements
Rank 1
answered on 23 Sep 2012, 03:07 AM
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
Tags
ComboBox
Asked by
Gerard
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Gerard
Top achievements
Rank 1
Hesham Nabih
Top achievements
Rank 1
Share this question
or