Icon in Value Template

[Pavel]

I would like to pass the class of icon in the value template to display icon in selection window.

        <SfMultiSelect  @ref="@_notest" Placeholder="Icon Filter" TValue="string[]" TItem="Notes" DataSource="@_iconData" AllowFiltering="true" PopupHeight="500px" Width="150px" CssClass="notes" Mode="VisualMode.CheckBox">
            <MultiSelectFieldSettings IconCss="Class" Value="IconDescription"></MultiSelectFieldSettings >
            <MultiSelectTemplates TItem=@Notes>
                <ValueTemplate>
                     <span class="@((context as Notes).Class)"></span>
                </ValueTemplate>
            </MultiSelectTemplates >
            <MultiSelectEvents OnValueSelect="OnSelect" OnValueRemove="@OnValueRemoveIconFilterHandler" Cleared="@ClearedIconFilterHandler" TItem="CircuitNotes" TValue="string[]"></MultiSelectEvents>
        </SfMultiSelect>

Instead of seeing the icon I am seeing the Value text. How do I display the icon?

My second question is that after the second selection of a checkbox, the text changes from the Value text to "2 selected", is there a way to change this text as well

[UdhayaKumar Duraisamy]

Hi Pavel,

Query 1:

I would like to pass the class of icon in the value template to display icon in selection window.

Instead of seeing the icon I am seeing the Value text. How do I display the icon?

As per your requirement, we have prepared a sample for displaying the icons in the MultiSelect component using CheckBox mode and when you select the value, the selected icon will be displayed as chips. Kindly refer to the below code example.

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Popups

 

<SfMultiSelect @ref="@_notest" Placeholder="Icon Filter" TValue="string[]" TItem="Notes" @bind-Value="@MultiVal" Mode="Syncfusion.Blazor.DropDowns.VisualMode.Box"

               DataSource="@_iconData" AllowFiltering="true" PopupHeight="500px" Width="300px" CssClass="notes">

    <MultiSelectFieldSettings IconCss="Class" Value="FirstName"></MultiSelectFieldSettings>

    <MultiSelectTemplates TItem=@Notes>

        <ValueTemplate>

            <i class="e-icons e-@((context as Notes).Name)"></i>

        </ValueTemplate>

        <ItemTemplate>

             @{

                        var contextValue = (context as Notes).Name;

                        var isChecked = MultiVal != null ? MultiVal.Contains(contextValue) : false;

                                   

                        <span>

                            <SfCheckBox TChecked="bool" @bind-Checked="isChecked"><i class="e-icons e-@contextValue"></i> - @((context as Notes).FirstName)</SfCheckBox>

                          

                        </span>

                }

        </ItemTemplate>

    </MultiSelectTemplates>

    <MultiSelectEvents TValue="string[]" TItem="Notes" OnValueSelect="onSelect"></MultiSelectEvents>

</SfMultiSelect>

 

@code {

    public SfMultiSelect<string[], Notes> _notest;

 

    public string[] MultiVal { get; set; } = new string[] { };

 

    public List<string> selectedItemData = new List<string> { };

    private bool IsVisible { get; set; } = false;

 

    public void onSelect(SelectEventArgs<Notes> e)

    {

 

        selectedItemData.Add(e.ItemData.Name);

    }

 

    public class Notes

    {

        public string FirstName { get; set; }

        public string Name { get; set; }

    }

 

    List<Notes> _iconData = new List<Notes> {

    new Notes() { FirstName="clock " ,  Name="clock" },

    new Notes() { FirstName="refresh " ,  Name="refresh" },

    new Notes() { FirstName="play " ,  Name="play" },

    new Notes() { FirstName="edit " ,  Name="edit" },

    new Notes() { FirstName="kpi " ,  Name="kpi" },

    };

}

 

Query 2:

My second question is that after the second selection of a checkbox, the text changes from the Value text to "2 selected", is there a way to change this text as well

In the attached sample, we have displayed the icons as a chip. So, the selected icon will be displayed like the below screenshot reference.

Screenshot reference:

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

Attachment: Icon_Display_75e1e5a2.zip