Change color of selected item tabs?

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    3 posts
    Member since:
    Jan 2017

    Posted 01 Feb Link to this post

    I have a scheduler with multiple people's schedules on it, each person has their own event color on the scheduler. I have a multiselector that lets me filter who's schedules I see on the scheduler. However, I want to change the tabs of those I select from the multiselect to have a background color that matches their event color. 

     

    So far, I have <div id="nameDiv" style="background-color: #:data.color#">#:data.text#</div> in my tagTemplate field in my multiselector. All this does is add a background to where the text is at inside the tag, leaving the ends of the tag to be uncolored. I want the backgrounds of the entire tag set to specific colors not attached to the text inside the tag.

     

    Does anyone know how to go about doing this? I was thinking if I could access the specific class that handles tag styling, but I cannot find what that is called anywhere...

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    249 posts

    Posted 03 Feb Link to this post

    Hi Tyler,

    You are correct that you should access the Kendo UI MultiSelect tagList to accomplish the desired multicolour tags:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#fields-tagList

    One way to do that is to attach an event handler to the select event. Then, in the handler function, change the background colour of the last item in the tagList e.g.:

    http://dojo.telerik.com/UTezI/6

    The setTimeout() is needed to ensure that the tagList will be populated by the time we try to manipulate its children elements.

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top