Change color of selected item tabs?

[Tyler]

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...

[Alex Hajigeorgieva]

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