Change the Background of the MultiSelect Tag from a Tooltip with a ColorPalette

Environment

Product	Progress® Kendo UI® MultiSelect for jQuery
Operating System	Windows 10 64bit
Browser	Google Chrome
Browser Version	86.0.4240.111 (Official Build) (64-bit)

Description

How can I change the background of the tags in the MultiSelect by picking a color from ColorPalette which is inside a Tooltip?

Solution

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