Set the Background of MultiSelect Tags with ColorPalette from ToolTip
Environment
| Product | Progress® Kendo UI® MultiSelect for jQuery |
| Product Version | 2021.1.224 |
| Operating System | Windows 10 32bit |
| Preferred Language | JavaScript |
Description
Is it possible to assign a color to the MultiSelect tags from a ToolTip as we can find it in software like Asana or Trello?
Solution
- Add a ToolTip to the MultiSelect's container. Use the
filtermethod to target the tags. - Set an Html element as
contentof the ToolTip. In the Tooltip'sshowevent handler initialize a ColorPalette from the Html element in the Tooltip'scontent. - Capture the
changeevent of the ColorPalette and set the new color as the background of the Tag that showed the Tooltip. Thenhidethe Tooltip.
<div id="container">
<select id="products"></select>
</div>
<script>
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
},
value: [
{ ProductName: "Chang", ProductID: 2 },
{ ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
]
});
$("#container").kendoTooltip({
filter: "li",
content: "<div id='color-chooser'></div>",
width:200,
show:function(e){
var sender = e.sender;
var target = e.sender.target();
var colorPalette = $("#color-chooser").data("kendoColorPalette");
if(colorPalette !=undefined){
colorPalette.destroy();
$("#color-chooser").empty();
}
$("#color-chooser").kendoColorPalette({
palette: [ "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" ],
tileSize: 30,
change: function() {
var colorId = this.value();
$(target[0]).css('background', colorId);
sender.hide();
}
});
}
});
});
</script>