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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bind Chips to List<T>

Thread ID:

Created:

Updated:

Platform:

Replies:

149053 Nov 12,2019 06:40 PM UTC Nov 14,2019 08:56 AM UTC Blazor 3
loading
Tags: Chips
Michael Gerling
Asked On November 12, 2019 06:40 PM UTC

Is it possible to bind Chips to a List<T>?

I'd like to populate a List<T> with some objects and Show the added Items to the user by Chips.

It should be possible to use the delete button of the Chips to remove items from the List<T>.

The Goal of that attempt is, to let the user collect some Items from another source in that List<T>, visualized by the Chips, and at the and perform some Action with the Items of the List.

Can I bind a ChipCollection to that List<T> and set a DisplayMember  and a ValueMember, so that I can consume a clicked Event on the delete Button of the Chip to remove the clicked Item from my List<T> by using the id-property of my item.?

Thanks Michael

Muthukrishnan Kandasamy [Syncfusion]
Replied On November 13, 2019 11:57 AM UTC

Hi Michael, 
 
Greetings from Syncfusion support. 
 
Yes, it is possible to bind List<T> to chips collection and able to provide the delete actions in each chip by enabling the property of EnableDelete. 
 
We have prepared sample for your convenience. In that sample, we have added List<T> values to the chip collection by adding the single chip list and then filtered through the loop then assigned corresponding value to the chip list. Refer to the below link for the sample. 
 
 
 
Regards, 
Muthukrishnan K 


Michael Gerling
Replied On November 14, 2019 05:19 AM UTC

Your sample only work's if the List is allready populated before first render. 

If i add items to the List later the line (i had to use round brackets to post the Line...):

(ChipListChip) Text=@currentData.text Enabled=@currentData.enabled)(/ChipListChip)

is skipped and no Chip is added. You directly can see this beahviour if you set a breakpoint on @foreach.

Any other Markup placed in the foreach-Block (for example:  (span)@currentData.text(/span)) would be reached and executed. only the ChipListChip ist ignored.

Here's the Code to prove (round brackets just here to be able to post the Code):

@page "/"
@using Syncfusion.EJ2.Blazor.Buttons
(p)(/p)
(div)
    (button @onclick="ClickButton")Hinzufügen(/button)
(/div)
(p)(/p)
 (EjsChipList EnableDelete="true")
      (ChipCollection)
            @foreach(ChipCollection currentData in ChipData){
               (span)@currentData.text(/span)
                (ChipListChip Text=@currentData.text Enabled=@currentData.enabled)(/ChipListChip)
            }
      (/ChipCollection)
      (ChipListEvents OnDelete="@OnDelete")(/ChipListEvents)
 (/EjsChipList)
 (div)Last Deleted Item: @DeleteItems(/div)
@code{
    public List(ChipCollection) ChipData = new List(ChipCollection)();
    public string DeleteItems { get; set; }
    public class ChipCollection
    {
        public string text { get; set; }
        public bool enabled { get; set; }
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        ChipData.Add(new ChipCollection
        {
            text = "Jenifer",
            enabled = true
        });
        ChipData.Add(new ChipCollection
        {
            text = "Amenda",
            enabled = true
        });
        ChipData.Add(new ChipCollection
        {
            text = "Isabella",
            enabled = true
        });
        ChipData.Add(new ChipCollection
        {
            text = "James",
            enabled = true
        });
    }
    public void OnDelete(DeleteEventArgs args)
    {
        DeleteItems = args.Text;
    }
    public void ClickButton()
    {
        ChipData.Add(new ChipCollection
        {
            text = "Name"+DateTime.Now.Ticks.ToString(),
            enabled = true
        });
    }
}

Muthukrishnan Kandasamy [Syncfusion]
Replied On November 14, 2019 08:56 AM UTC

Hi Michael, 
 
In our Chips component, we have provided the built-in option to add a new chip item using Add method. To know more about the Add method refer the below documentation link.  
 
 
Refer the below code block: 
 
public void ClickButton() 
    { 
        chip.Add(new 
        { 
            text = "Name" + DateTime.Now.Ticks.ToString(), 
            enabled = true 
        }); 
    } 
 
 
Regards, 
Muthukrishnan K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon