Background color of chip based on property

[Thomas]

Hi

I have a MultiSelect dropdown configured like this:

<SfMultiSelect  ShowSelectAll="true" AllowFiltering="true" TValue="Guid[]" TItem="Station" @bind-Value="@_selectedStations" ID="default" Placeholder="e.g. Dark Orange" Mode="@VisualMode.Box" DataSource="@Stations">
                    <MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings>
                    <MultiSelectEvents TValue="Guid[]" TItem="Station"  OnChipTag="@OnTagging"></MultiSelectEvents>
                </SfMultiSelect>

The Station class has a property 'Color' with a HEX color assigned to it. I'd like to give the chip that value as background color. I can only find the OnChipTag event, where I can set a class, but no styles. Is there any way to achieve this?

[Yohapuja Selvakumaran]

Hi Thomas,

Thank you for reaching out to us. We've carefully reviewed your requirement and are pleased to inform you that you have the flexibility to customize the appearance of the chips using CSS. To demonstrate this capability, we've prepared a sample tailored to your specifications, which you can explore for further reference.

Sample:
https://blazorplayground.syncfusion.com/BtrJNSMHgxKSHxUK

For more comprehensive guidance on customizing the appearance of chips, we recommend consulting our documentation and demo:

Documentation: https://blazor.syncfusion.com/documentation/multiselect-dropdown/style#customizing-the-appearance-of-chips

Demo:  https://blazor.syncfusion.com/demos/multiselect-dropdown/chip-customization?theme=fluent

Regards,

Yohapuja S

[Thomas]

Thank you for the response. I am aware of the possibility to assign a predefined class. In my case the color code is created at runtime and can be virtually limitless, so I cannot create the css classes beforehand. I'm looking for a way to assign the Code property to a 'background-color' property of the Chip.

[Yohapuja Selvakumaran]

Hi Thomas,

Thank you for reaching out to us. We have validated your requirement, and you can achieve this using JSInterop. By calling a JavaScript method in the OnChipTag event, you can dynamically set the background color of the chips based on their respective values. Below is a detailed sample that demonstrates this requirement. Please review the code snippet and sample provided for further reference.

Code Snippet:

 

[Index.razor]

 

 

@inject IJSRuntime JSRuntime;

 

@using Syncfusion.Blazor.DropDowns;

 

<div class="col-lg-12 control-section">

    <div class="control-wrapper">

        <label class="example-label">Select favorite colors</label>

        <SfMultiSelect TValue="string[]" TItem="GameFields" @bind-Value="@ChipValue" ID="default" Placeholder="e.g. Dark Orange" Mode="@Syncfusion.Blazor.DropDowns.VisualMode.Box" DataSource="@ColorsData">

            <MultiSelectFieldSettings Text="Color" Value="Code"></MultiSelectFieldSettings>

            <MultiSelectEvents TValue="string[]" TItem="GameFields" OnChipTag="@OnTagging"></MultiSelectEvents>

        </SfMultiSelect>

    </div>

</div>

 

@code {

    private string[] ChipValue { get; set; } = { "#2F5D81", "#D44FA3", "#4CD242", "#FE2A00", "#75523C" };

    public class GameFields

    {

        public string Color { get; set; }

        public string Code { get; set; }

    }

    private List<GameFields> ColorsData = new List<GameFields>()

    {

        new GameFields(){ Color= "Chocolate", Code= "#75523C" },

        new GameFields(){ Color= "Cadet Blue", Code= "#3B8289" },

        new GameFields(){ Color= "Dark Orange", Code= "#FF843D" },

        new GameFields(){ Color= "Dark Red", Code= "#CA3832"},

        new GameFields(){ Color= "Fuchsia", Code= "#D44FA3" },

        new GameFields(){ Color= "Hot Pink", Code= "#F23F82" },

        new GameFields(){ Color= "Indigo", Code= "#2F5D81" },

        new GameFields(){ Color= "Lime Green", Code= "#4CD242"},

        new GameFields(){ Color= "Orange Red", Code= "#FE2A00"},

        new GameFields(){ Color= "Tomato", Code= "#FF745C"}

    };

    private async void OnTagging(Syncfusion.Blazor.DropDowns.TaggingEventArgs<GameFields> args)

    {

        await this.JSRuntime.InvokeVoidAsync("JSMethod");

    }

}

 

 

 

 

[Host.cshtml]

 

 

    <script>

 

        function JSMethod() {

            setTimeout(function () {

                var chips = document.getElementsByClassName("e-chips");

                for (var i = 0; i < chips.length; i++) {

                    var chip = chips[i];

                    var color = chip.getAttribute("data-value");

                    chip.style.backgroundColor = color;

                }

            }, 20);

        }

 

    </script>

Documentation: https://blazor.syncfusion.com/documentation/multiselect-dropdown/events#onchiptag 

Regards,

Yohapuja S

Attachment: Multiselect_chip_79f9b3cc.zip