We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Render a tag input using SFChips and SFMultiSelect

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.



4 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team April 11, 2023 06:54 AM UTC

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:


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



EM Essaddek Mohammed April 11, 2023 09:16 AM UTC

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. 



EM Essaddek Mohammed April 11, 2023 11:51 AM UTC

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

thank you.



UD UdhayaKumar Duraisamy Syncfusion Team April 20, 2023 01:04 PM UTC

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


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon