Individual colors for selected items in SfMultiSelect

[Thomas Boel]

Is it possible to configure the SfMultiSelect so that each selected value (when the dropdown is collapsed) has individual colors?

I want to achieve something like what you have on Github when selecting labels for an issue - here each label has its own color. See attached doc.

Attachment: github_labels_1066df2.zip

[Thomas Boel]

I found out that you should use <ValueTemplate> to achieve it.

However, I can't figure out how to properly control the background color of a chip. If I change the color then part of the chip still has a grey background originating from the ".e-multi-select-wrapper .e-chips" CSS definition. How can I affect/modify that using <ValueTemplate>?

Attachment: multiselect_chip_background_color2_7029f53d.zip

[Ponmani Murugaiyan]

Hi Thomas, 

Thanks for contacting Syncfusion support. 

Yes, you can achieve chip customization as like below code snippet. Please find the sample below for reference. 

<SfMultiSelect TValue="string[]" TItem="GameFields" ID="default" Mode="@Syncfusion.Blazor.DropDowns.VisualMode.Box" DataSource="@colorsData"> 

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

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

</SfMultiSelect> 

 

<style> 

    .e-multi-select-wrapper .e-chips { 

        opacity: 0.9; 

    } 

 

    .e-multi-select-wrapper .e-chips:hover { 

       opacity: 1; 

    } 

 

    .e-multi-select-wrapper .e-chips .e-chips-close.e-icon::before, 

    .e-multi-select-wrapper .e-chips .e-chipcontent, 

    .e-multi-select-wrapper .e-chips .e-chipcontent:hover { 

       color: #ffffff; 

    } 

 

    ... 

 

    .e-chips.tomato, 

    .e-chips.tomato:hover { 

        background-color: #FF745C; 

    } 

</style> 

@code { 

    public class GameFields 

    { 

        public string Color { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<GameFields> colorsData = new List<GameFields>() 

{ 

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

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

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

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

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

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

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

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

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

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

  }; 

 

    public void onTagging(Syncfusion.Blazor.DropDowns.TaggingEventArgs<GameFields> args) 

    { 

       args.SetClass = args.ItemData.Color.ToLower(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multiselect_Background-346132096 

Regards, 

Ponmani M