New to Kendo UI for jQuery? Start a free 30-day trial

Styling MultiSelect Tags with Background Colors

Environment

Product	MultiSelect for Progress® Kendo UI® for jQuery
Version	2025.1.227

When using the MultiSelect component in Progress® Kendo UI® for jQuery, the tags may appear partially styled if you use the tagTemplate to set a background color. This happens because only the inner <span> element is affected by the custom template, while the outer frame remains styled with the default gray color. I want to apply the background color to the entire tag, including its frame.

This knowledge base article also answers the following questions:

How to style the entire MultiSelect tag in Kendo UI?
How to apply dynamic background colors to tags in MultiSelect?
Can I use JavaScript events to change MultiSelect tag colors?

Solution

To fully style the tags in the MultiSelect component, use the following approach:

Add a custom class to the tagTemplate.
Use JavaScript to dynamically set the background color of the closest parent element with the k-button class, which represents the tag's container.

Steps

Define tagTemplate with a custom class:

html

<script id="tagTemplate" type="text/x-kendo-template">
    <span class="custom">
        #: name #
    </span>
</script>

Handle the change and dataBound events to apply styles: Use JavaScript to find the parent element of the inner span and apply the desired background color. Example:

javascript

change: function (e) {
    $(".custom").closest(".k-button").css("background-color", "salmon");
},
dataBound: function (e) {
    $(".custom").closest(".k-button").css("background-color", "salmon");
}

Ensure initial values are styled: The dataBound event is particularly useful for styling tags when the MultiSelect has initial values.

Example

Here is an example demonstrating the implementation:

    <select id="multiSelect" multiple="multiple"></select>

    <script id="tagTemplate" type="text/x-kendo-template">
        <span class="custom">#: data.name #</span>
    </script>

    <script>
        $("#multiSelect").kendoMultiSelect({
            dataTextField: "name",
            dataValueField: "id",
            dataSource: [
                { name: "Red", id: 1 },
                { name: "Blue", id: 2 },
                { name: "Green", id: 3 }
            ],
            tagTemplate: $("#tagTemplate").html(),
            change: function (e) {
                $(".custom").closest(".k-button").css("background-color", "salmon");
            },
            dataBound: function (e) {
                $(".custom").closest(".k-button").css("background-color", "salmon");
            }
        });
    </script>

Notes

As the inner span is part of the custom tagTemplate, styling the entire tag requires JavaScript to target the k-button parent element.
You can modify the background color dynamically based on your requirements.