This is a migrated thread and some comments may be shown as answers.

Add color circle next to each option

6 Answers 617 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Ran
Top achievements
Rank 1
Ran asked on 24 Nov 2015, 05:35 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 26 Nov 2015, 09:55 AM
Hi Ran,

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

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ran
Top achievements
Rank 1
answered on 26 Nov 2015, 01:17 PM

Hi Vladimir,

 Working great!

 Thanks,

Ran

0
Ran
Top achievements
Rank 1
answered on 06 Dec 2015, 01:25 PM

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

0
Accepted
Vladimir Iliev
Telerik team
answered on 08 Dec 2015, 09:49 AM
Hi Ran,

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

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ran
Top achievements
Rank 1
answered on 13 Dec 2015, 09:50 AM

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

0
Vladimir Iliev
Telerik team
answered on 15 Dec 2015, 10:10 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Ran
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Ran
Top achievements
Rank 1
Share this question
or