Multiselect displaying encoded HTML

[Dan Louche]

I am displaying a list of items in a multiselect with many including the following characters " >> "

However, the multiselect is encoding them so that they show up as  '>>' when I want to select them (but not when my selection is shown)

For instance, in this image I have selected a value and it is displayed correctly

However, when I select the control the '>>' are displayed as encoded values

Thanks

[Priyanka Karthikeyan]

Hi Dan Louche,

 

Thank you for reaching out to us.  To prevent the Blazor MultiSelect Dropdown from displaying encoded HTML characters like >> when selecting items, you can customize the display of the selected items using the ValueTemplate tag. This allows you to control how the selected values are rendered, ensuring that special characters are displayed correctly.

 

Here is an example of how you can use the ValueTemplate to customize the display of selected items:

 

 

@using Syncfusion.Blazor.DropDowns

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

    <div class="control-wrapper">

        <label class="example-label">Select countries</label>

        <SfMultiSelect TValue="string[]"  TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" AllowFiltering="true">

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

              <MultiSelectTemplates TItem="Countries">

            <ItemTemplate>

                <span>@((context as Countries).Name)&gt;&gt;</span>

        </ItemTemplate>

        <ValueTemplate>

            <span>@((context as Countries).Name)&gt;&gt;</span>

        </ValueTemplate>

          </MultiSelectTemplates>

        </SfMultiSelect>

    </div>

</div>

 

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

 

Documentation Reference:  https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates

 

Regards,

Priyanka K