Remove chips not refresh correctly

[Carlos]

Hello !!

Im trying the SfChipList component but when I have troubles with Delete Event.

When I add dynamically a new chip, the component show me the new chip correctly:

<input type="text" @bind="InputTag" @bind:event="oninput" @onkeypress="DoAddCustomerTag" />                

<SfChipList EnableDelete="true" Selection="Selection.Single">

<ChipListEvents OnDelete="@DoHandleChipEvent"></ChipListEvents>

<ChipCollection>

@foreach (var tag in _customer.Tags)

{                            

<ChipListChip Value="@tag" Text="@tag"></ChipListChip>

}

</ChipCollection>

</SfChipList>

@code

{

string InputTag { get; set; }

private void DoHandleChipEvent(DeleteEventArgs args)

{

_customer.Tags.Remove(args.Text);

}

private void DoAddCustomerTag(KeyboardEventArgs args)

{

if (args.Key.ToUpper()=="ENTER")

{

_customer.Tags.Add(InputTag);

InputTag = string.Empty;

}

}

}

However, when I click to delete the new chip created, the event not work. If my _customer.Tags an item initially, it works but remove all chips.

[Sowmiya Padmanaban]

Hi Carlos,  

 

Greetings from Syncfusion support. 

 

We have checked your attached code snippet. Your requirement is to dynamically add the chip to the chip component and delete the chip using delete icon. In your shared code snippet, you are adding the chips using native Add method. We would like to let you know that,  In Chip component, we have provided a public method Add. Using this method, you can add the new chip to the chip component.  

 

Refer the below code snippet. 

public void onToggleClick() 

    { 

        var value = this.textbox.Value; 

        ChipModel chips = new ChipModel(); 

        chips.Text = value; 

        chip.Add(chips); 

    } 

 

It triggers the OnDelete method, when deleting the chip using delete icon. 

 

<SfChipList EnableDelete="true" @ref="chip"> 

    <ChipCollection> 

        @foreach (ChipCollection currentData in ChipData) 

        { 

            <ChipListChip Text=@currentData.text></ChipListChip> 

        } 

    </ChipCollection> 

    <ChipListEvents OnDelete="@OnDelete"></ChipListEvents> 

</SfChipList> 

  public void OnDelete(DeleteEventArgs args) 

    { 

        DeleteItems = args.Text; 

    } 

 

You can able to get the current chip count and value using Chips property of Chip component. Refer the below code snippet. 

var currentChip = chip.Chips; 

 

For your reference, we have prepared a sample. In this sample, we have added dynamically added a chip using button click. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11712138895.zip 

 

Refer the below link to know more about the Chip component. 

 

UG Documentation –https://blazor.syncfusion.com/documentation/chip/getting-started/ 

 

Demo link-https://blazor.syncfusion.com/demos/chips/default-functionalities/ 

 

API Reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChipList.html 

 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P