Render a tag input using SFChips and SFMultiSelect

[Essaddek Mohammed]

Hello,

I would like to build this : component  Bootstrap Tags Input (bootstrap-tagsinput.github.io) using SFChips and a textbox to get finally a comma separated string inside my model.

Thank you.

[UdhayaKumar Duraisamy]

Thank you for reaching out to us with your query. We understand that you would like to use Syncfusion's SFChips and SFMultiSelect components to build a tag input similar to Bootstrap Tags Input.

To achieve this, we recommend using the SFMultiSelect component with Box mode, which allows you to add tags/chips to the input. You can also use the AllowCustomValue property to allow users to enter custom tags.

To display the selected tags/chips as a comma-separated string, you can bind the selected values to a string array and use the string.Join() method to concatenate the values with a comma separator.

@using Syncfusion.Blazor.DropDowns

 

<div style="margin:130px auto;width:300px">

    @if (InputValue !=null)

    {

        <p>InputValue:@string.Join(",", InputValue)</p>

    }

    <SfMultiSelect TValue="string[]" TItem="string" @bind-Value="@InputValue" Mode="VisualMode.Box" AllowCustomValue="true" Placeholder="Enter your Favorite Sports">

    </SfMultiSelect>

</div>

 

@code {

    public string[] InputValue { get; set; }

}

<style>

    .e-popup.e-popup-open {

        display: none;

    }

</style>

Please find the solution code for your reference above. We have also included a style to hide the popup that appears when the SFMultiSelect component is clicked, which makes the component behave more like a traditional tag input.

Documentation:

• https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value

We hope that this solution meets your requirements. If you have any further questions or concerns, please feel free to let us know.

[Essaddek Mohammed]

Hello, Thank you for your answer,

I've tried the solution you provided but, unfortunately it did not work, a loading spinner is shown but when clicking ',' no box is shown.

Thank you in advance. 

[Essaddek Mohammed]

erratum : it works, but not the two binding.
if the values are set, the textbox value is not updated.

thank you.

[UdhayaKumar Duraisamy]

You can use List<string> values and bind them to the DataSource property, as well as the @bind-value property, to meet your needs. Please refer to the shared code snippet and sample below for further details.

@using Syncfusion.Blazor.DropDowns

 

<div style="margin:130px auto;width:300px">

    @if (InputValue != null)

    {

        <p>InputValue:@string.Join(",", InputValue)</p>

    }

    <SfMultiSelect TValue="List<string>" TItem="string" @bind-Value="@InputValue" Mode="VisualMode.Box" AllowCustomValue="true" Placeholder="Enter your Favorite Sports" DataSource="@InputValue">

    </SfMultiSelect>

</div>

 

@code {

    List<string> InputValue = new List<string> { "Basketball", "Football", "Tennis", "Swimming" };

}

 

<style>

    .e-popup.e-popup-open {

        display: none;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Input_Value_as_Chip-1238174947