Bind Chips to List<T>

[Michael Gerling]

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]

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. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-422972851.zip 

 

 

Regards, 

Muthukrishnan K 

[Michael Gerling]

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) [email protected] [email protected])(/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 [email protected] [email protected])(/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]

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.  

 

API Documentation: https://ej2.syncfusion.com/documentation/api/chips/chipList/#add 

 

Refer the below code block: 

 

public void ClickButton() 

    { 

        chip.Add(new 

        { 

            text = "Name" + DateTime.Now.Ticks.ToString(), 

            enabled = true 

        }); 

    } 

 

 

Regards, 

Muthukrishnan K