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

Change color of selected item tabs?

1 Answer 233 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 01 Feb 2017, 07:53 PM

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

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 03 Feb 2017, 08:17 AM
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.
Tags
MultiSelect
Asked by
Tyler
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or