[Solved] Template for each value?

[Julien]

is it possible to have a template for each element in the combobox?

I need to have some element of the list disabled(because they are in facts categories, 

I wish that the result can looks like this:

<select name="img">
   <option Value="" Disabled="" >Select:</option>
   <option Value="" Disabled="" >- Background ------------------</option>
   <option Value="1">Background 1</option>
   <option Value="2">Background 2</option>
   <option Value="3">Background 3</option>
   <option Value="" Disabled="" >- Foreground------------------</option>
   <option Value="4">Foreground 1</option>
   <option Value="5">Foreground 2</option>
   <option Value="6">Foreground 3</option>
</select>

[Georgi Krustev]

Hello Julien,

 
Currently the combobox does not support such functionality. Nevertheless you can achieve it binding the OnDataBound event and modify the style of the LI elements:

function onComboBoxDataBound(e) {
    var ul = $(this).data("tComboBox").dropDown.$element.find("ul");
    //modify the children of the UL element
}

Please note that if you add LI elements manually the combobox, it will not work properly.

Kind regards,
Georgi Krustev
the Telerik team

[Stefan]

Might be a little late to chime in now, but I just had a similiar issue and after digging around a little more I found a pretty sweet solution. Don't know if it breaks something at some point yet, but so far I encountered no problems.

Definition of AutoComplete

@(Html.Telerik().AutoComplete().Name("whatever").Multiple(builder => builder.Separator("; "))

.DataBinding(builder => builder.Ajax().Select("_SuggestWithMail", "Resource"))
.ClientEvents(e => e.OnLoad("onLoad")).Filterable(builder => builder.FilterMode(AutoCompleteFilterMode.Contains)))

Resource._SuggestWithmail (Note: What you put in Text is what you will be put into the control):

[HttpPost]
public JsonResult _SuggestWithMail(string text)
{
    var data = _service.Get()
        .Where(x => (x.Name.Contains(text) && !(x.Email == null || x .Email.Trim() == string.Empty)) || x.Email.Contains(text))
        .Select(x => new { Text = x.Email, Name = x.FullName })
        .WithTranslations();
    return Json(data);
}

In the onLoad function I overwrite the _html function of the dropDown like this

function onLoad() {
       var control = $(this).data('tAutoComplete');
       control.dropDown._html = function(items, encode) {
           var sb = new $.telerik.stringBuilder();
           if (!items)
               return sb.string();

           for (var i = 0, count = items.length; i < count; i++) {
               var html = " ", item = items[i];
               html = item.Name + "<small style='display: block'>" + item.Text + "</small>";
               var obj = { html: html, dataItem: item };
               if (this.onItemCreate) {
                   this.onItemCreate(obj);
               }

               sb.cat('<li unselectable="on" class="t-item">').cat(obj.html).cat("</li>");
           }

           return sb.string();
       };
   }

Which yields whats attached as a screenshot.