Customize Chips in MultiSelect

[Yongkee Cho]

Is it possible to customize the chips in the MultiSelect to add an edit button next to the close button?

<SfMultiSelect @bind-Value="@Content.ParameterNames" TValue="string[]" TItem="ArmParameter" Placeholder="Parameters" FloatLabelType="FloatLabelType.Always" AllowCustomValue="true" DataSource="@_armParameters">
    <MultiSelectFieldSettings Value="Name" Text="Name"></MultiSelectFieldSettings>
    <MultiSelectTemplates TItem="ArmParameter">                     
        <ValueTemplate>
            @{
                var parameter = context as ArmParameter;
                <span class="e-badge text-bg-warning me-1">@(parameter.Name)</span>
                <span>@($"{parameter.DefaultValue} {parameter.Unit}")</span>
            }
        </ValueTemplate>
    </MultiSelectTemplates>
</SfMultiSelect>

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Yongkee Cho,

 

We’ve successfully customized the chips in the MultiSelect component to include an edit button next to the close button , just as you requested. Let me walk you through how this was accomplished:

 

<div class="multiselect-editor-container">

    <SfMultiSelect TValue="string[]" TItem="EmployeeData"

        Placeholder="Select employees"

        Mode="VisualMode.Box"

        @ref="MultiselectRef"

        DataSource="@Employees">

        <MultiSelectTemplates TItem="EmployeeData">

            <ValueTemplate>

                <div class="chip-wrapper" @key="(context as EmployeeData).EmployeeID">

                    <SfInPlaceEditor TValue="string"

                        Value="@((context as EmployeeData).FirstName)"

                        Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text"

                        EditableOn="EditableType.EditIconClick"

                        ActionOnBlur="ActionBlur.Submit"

                        SubmitOnEnter="true"

                        ShowButtons="false">

                        <InPlaceEditorEvents ValueChange="@((Syncfusion.Blazor.InPlaceEditor.ChangeEventArgs<string> e) => UpdateEmployee((context as EmployeeData).EmployeeID, e.Value))">

                        </InPlaceEditorEvents>

                    </SfInPlaceEditor>

                </div>

            </ValueTemplate>

        </MultiSelectTemplates>

        <MultiSelectFieldSettings Text="FirstName" Value="EmployeeID">

        </MultiSelectFieldSettings>

    </SfMultiSelect>

</div>

 

@code {

    private SfMultiSelect<string[], EmployeeData> MultiselectRef;

    private List<EmployeeData> Employees = new();

 

    public class EmployeeData

    {

        public string EmployeeID { get; set; }

        public string FirstName { get; set; }

    }

 

    protected override void OnInitialized()

    {

        Employees = new List<EmployeeData>

        {

            new EmployeeData { EmployeeID = "1", FirstName = "Alice Johnson" },

            new EmployeeData { EmployeeID = "2", FirstName = "Bob Smith" },

            new EmployeeData { EmployeeID = "3", FirstName = "Charlie Brown" },

            new EmployeeData { EmployeeID = "4", FirstName = "David Lee" },

            new EmployeeData { EmployeeID = "5", FirstName = "Eve Wilson" }

        };

    }

 

    private void UpdateEmployee(string employeeId, string newValue)

    {

        if (!string.IsNullOrWhiteSpace(newValue))

        {

            var employee = Employees.FirstOrDefault(e => e.EmployeeID == employeeId);

            if (employee != null)

            {

                employee.FirstName = newValue;

            }

        }

    }

}

 

 

How We Achieved It

1. ValueTemplate Usage
   • We leveraged the ValueTemplate of the MultiSelect component.
   • This allowed us to fully control the rendering of each chip instead of relying on the default appearance.
2. Chip Layout with Edit Option
   • Inside the template, we wrapped each chip in a custom container (<div class="chip-wrapper">).
   • Alongside the default text and close button, we added an edit icon that triggers inline editing.
3. In-Place Editing
   • We integrated the InPlaceEditor component inside the chip.
   • By hovering the selected chip item, the edit icon will be visible.
   • This editor is configured to activate when the edit icon is clicked (EditableOn="EditableType.EditIconClick").
   • It allows the user to directly modify the chip’s text without removing or re-adding the item.
4. Smooth User Experience
   • The editor submits changes automatically when the user presses Enter or clicks away (SubmitOnEnter="true", ActionOnBlur="ActionBlur.Submit").
   • We disabled extra buttons (ShowButtons="false") to keep the chip clean and intuitive.
5. Data Binding & Update Logic
   • When a user edits a chip, the ValueChange event updates the corresponding item in the Employees list.
   • This ensures the underlying data source stays in sync with the edited chip text.

 

For your reference, we’ve also included a sample showing this in action along with a GIF demonstration:

Gif:

Sample: https://blazorplayground.syncfusion.com/embed/rDBHtAivzUaQydUW?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2