Add color circle next to each option

[Ran]

Hi,

 I'm using custom editable template.

I would like to to add next to each option on my select:

<div class="k-edit-label"><label for="routeId">Route</label></div>
<div data-container-for="routeId" class="k-edit-field">
    <select id="routeId" data-bind="value:route_id" data-role="dropdownlist"
            data-value-field="id" data-text-field="name" data-color-field="color">
    </select>
</div>

I guess it should work with  k-scheduler-mark.

 Thanks

 

[Vladimir Iliev]

Hi Ran,

Please check the example below which shows how to utilize the dropDownList "template" option to add the desired colors:

• Scheduler: Custom resource editor with template 

Regards,
Vladimir Iliev
Telerik

 

 

[Ran]

Hi Vladimir,

 Working great!

 Thanks,

Ran

[Ran]

Hi Vladimir,

I would like to add this color (k-scheduler-mark) to the selected option when the DropDown is close.

Is there any solution for that?

 Thanks,

Ran

[Vladimir Iliev]

Hi Ran,

You can use the "valueTemplate" option for customizing the selected item template:

• DropDownList: valueTemplate

Regards,
Vladimir Iliev
Telerik

 

 

[Ran]

Hi Vladimir,

Thanks for answer. it was very helpful.

Another issue with the DropDown.

I would like to disable Route option that has "active: false".

I need to to see the option but with opacity and to make it unclickable.

Here is my code :

http://dojo.telerik.com/@idoglik6/ocavO

 Thanks,

Ran

[Vladimir Iliev]

Hello Ran,

You can customize the look of the items inside the DropDownList using the template options shown in previous demos and utilize the "select" event of the widget to prevent selecting items that are disabled:

$("#multiselect").kendoMultiSelect({
 select: function(e) {
   var item = e.item;

   //check the 'disabled' field from the DDL model
   if(this.dataItem(item).get("disabled"))
   {
     e.preventDefault();
     e.stopPropagation();
   }
 },

Regards,
Vladimir Iliev
Telerik