Add color circle next to each option

7 posts, 2 answers
  1. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 24 Nov 2015 Link to this post

    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

     

  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 26 Nov 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 26 Nov 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

     Working great!

     Thanks,

    Ran

  5. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 06 Dec 2015 in reply to Vladimir Iliev Link to this post

    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

  6. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Dec 2015 Link to this post

    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!
     
  7. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 13 Dec 2015 in reply to Vladimir Iliev Link to this post

    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

  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 15 Dec 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready