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

1. Add a ToolTip to the MultiSelect's container. Use the filter method to target the tags.
2. Set an Html element as content of the ToolTip. In the Tooltip's show event handler initialize a ColorPalette from the Html element in the Tooltip's content.
3. Capture the change event of the ColorPalette and set the new color as the background of the Tag that showed the Tooltip. Then hide the 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>

See also

• JavaScript API Reference of the MultiSelect
• JavaScript API Reference of the Tooltip
• JavaScript API Reference of the ColorPalette
• jQuery css Method