Display Text and Value both on the chip

[Harshad]

Hi,

Is there a way to display text and value both as Text on a chip or have a template for the Text content?

I have Code and description in the ChipItem.  I can show description as Text and assign Value=Code.  But I want to display "Code - Description".  I can have a computed filed in the data and show that as Text.  But I was wondering if it can show Value as well.

I have a workaround, so no issue.  Just wondering if value can be displayed along with the text.

Thanks

Harshad

[Harshad]

Sorry to bother you.  I should have looked at the documentation a little more carefully.

This is what I wanted and it works as intended.

<ChipItem [email protected] Enabled=true>

<span>@diag.DiagCode - @diag.DiagDescr</span>

</ChipItem>

Thanks
Harshad

[Shereen Shajahan]

Hi Harshad,

Glad to know the issue has been resolved. Please get back to us for assistance in the future.

Regards,

Shereen 

[Harshad]

I had to use Chips property of SfChip instead of <ChipItems> as above.  I also needed the template.  So I did as below.

<SfChip Chips="@DiagChips" Selection="Syncfusion.Blazor.Buttons.SelectionType.Multiple" EnableDelete="true" style="margin-bottom:10px; padding-left:20px;">

<ChipEvents OnClick="@OnDiagToggle" Deleted="@OnDiagDeleted"/>

</SfChip>

In the codebehind,

DiagChips.Add(new ChipItem

{

Text= diag.DiagDescr,

Value = diag.Code,

CssClass = "e-outline",

Enabled = true,

Template = BuildChipTemplate(newDiag)

})

where Template is:

        private RenderFragment BuildChipTemplate(ConsDiag diag) => builder =>

        {

            builder.OpenElement(0, "span");

            builder.AddContent(1, $"{diag.DiagCode} - {diag.DiagDescr}");

            builder.CloseElement();

        };

That works as well.

The issue is that with this programatically added chip shows both, Text and the templated span. I removed Text=diag.DiagDescr from within new ChipItem() and it displays as needed, but then the Chip does not have Text value.

When I was not using Chips property and had foreach in razor with this template:

<ChipItem [email protected] Enabled=true>

<span>@diag.DiagCode - @diag.DiagDescr</span>

</ChipItem>

the chip showed : A001 - Cholera.

With the programatic aprproach, if I set Text=diag.DiagDescr, the chip shows:

CholeraA001 - Cholera.

To achieve A001 - Cholera, I removed Text=diag.DiagDescr but then Text is obviously blank.

How to handle this?

[Priyanka Karthikeyan]

Hi Harshad,

Thank you for the update. We have created a sample demonstrating the correct approach for Syncfusion Blazor Chips.

 When using the Chips property with ChipItem, do not use both Text and Template together, as this causes content duplication. Use one or the other:

• Use Template only – for custom rendering and formatting
• Use Text only – for simple text display

Recommended Approach: Template Only

In this sample, we use only the Template property to render chip content, eliminating any duplication:

 

​@page "/counter"
@using Syncfusion.Blazor.Buttons

<div class="container">
    <h3>Diagnosis Selection</h3>

    <SfChip Chips="@DiagChips"
            Selection="Syncfusion.Blazor.Buttons.SelectionType.Multiple"
            EnableDelete="true"
            style="margin-bottom:10px; padding-left:20px;">
        <ChipEvents OnClick="@OnDiagToggle" Deleted="@OnDiagDeleted" />
    </SfChip>

    <div style="margin-top:20px;">
        <button class="btn btn-primary" @onclick="AddNewChip">Add Diagnosis</button>
        <button class="btn btn-secondary" @onclick="ClearChips">Clear All</button>
    </div>

    <div style="margin-top:20px;">
        <h4>Selected Diagnoses:</h4>
        @if (SelectedDiagnoses.Any())
        {
            <ul>
                @foreach (var diag in SelectedDiagnoses)
                {
                    <li>@diag.DiagCode - @diag.DiagDescr</li>
                }
            </ul>
        }
        else
        {
            <p>No diagnoses selected</p>
        }
    </div>
</div>

@code {
    private List<ChipItem> DiagChips = new List<ChipItem>();
    private List<ConsDiag> SelectedDiagnoses = new List<ConsDiag>();
    private List<ConsDiag> AllDiagnoses = new List<ConsDiag>();

    protected override void OnInitialized()
    {
        // Initialize sample data
        AllDiagnoses = new List<ConsDiag>
        {
            new ConsDiag { DiagCode = "A001", Code = "A001", DiagDescr = "Cholera" },
            new ConsDiag { DiagCode = "A002", Code = "A002", DiagDescr = "Typhoid fever" },
            new ConsDiag { DiagCode = "A003", Code = "A003", DiagDescr = "Paratyphoid fever" },
            new ConsDiag { DiagCode = "A04", Code = "A04", DiagDescr = "Bacterial infection" }
        };

        // Populate chips on initialization (if needed)
        LoadChips();
    }

    private void LoadChips()
    {
        DiagChips.Clear();
        foreach (var diag in AllDiagnoses)
        {
            DiagChips.Add(new ChipItem
            {

                Value = diag.Code,
                CssClass = "e-outline",
                Enabled = true,
                Template = BuildChipTemplate(diag)
            });
        }
    }

    private RenderFragment BuildChipTemplate(ConsDiag diag) => builder =>
    {
        builder.OpenElement(0, "span");
        builder.AddContent(1, $"{diag.DiagCode} - {diag.DiagDescr}");
        builder.CloseElement();
    };

    private void OnDiagToggle(Syncfusion.Blazor.Buttons.ChipEventArgs args)
    {
        if (args.Value != null)
        {
            var selectedDiag = AllDiagnoses.FirstOrDefault(d => d.Code == args.Value.ToString());
            if (selectedDiag != null && !SelectedDiagnoses.Any(d => d.Code == selectedDiag.Code))
            {
                SelectedDiagnoses.Add(selectedDiag);
            }
        }
        StateHasChanged();
    }

    private void OnDiagDeleted(Syncfusion.Blazor.Buttons.ChipDeletedEventArgs args)
    {
        if (args.Value != null)
        {
            var deletedDiag = SelectedDiagnoses.FirstOrDefault(d => d.Code == args.Value.ToString());
            if (deletedDiag != null)
            {
                SelectedDiagnoses.Remove(deletedDiag);
            }
        }
        StateHasChanged();
    }

    private void AddNewChip()
    {
        var newDiag = new ConsDiag
        {
            DiagCode = "NEW1",
            Code = "NEW1",
            DiagDescr = "New Diagnosis"
        };

        DiagChips.Add(new ChipItem
        {
            Value = newDiag.Code,
            CssClass = "e-outline",
            Enabled = true,
            Template = BuildChipTemplate(newDiag)
        });

        AllDiagnoses.Add(newDiag);
        StateHasChanged();
    }

    private void ClearChips()
    {
        DiagChips.Clear();
        SelectedDiagnoses.Clear();
        StateHasChanged();
    }

    // Model class
    public class ConsDiag
    {
        public string DiagCode { get; set; }
        public string Code { get; set; }
        public string DiagDescr { get; set; }
    }
}

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

 

Documentation Reference: Customization in Blazor Chip Component | Syncfusion®

 

Regards,

Priyanka K

[Harshad]

Thank you for your response.