Hook up my own Command and CommandParameter to execute when Chip is "closed"

Hello,

I am currently facing some issues working with SfChipGroup and SfChip:

  1. How to hook up my Command and CommandParameter?

    Is there a way to hook up my own Command and CommandParameter to each chip in a SfChipGroup so that I have full control over whether and how a chip is "closed" and thus removed from the underlying collection of the ItemSource? So far, I have not found any way to hook up my own command for this. When clicking the close button, a chip simply gets removed and so I cannot intervene and execute some additional code. This is very inconvenient, because the SfChipGroup seems to work directly on the ItemSource when closing chips, while this is not the case when adding new items using an InputView. I would like to remove the chip that should be closed from the underlying collection of the ItemSource by myself.

  2. It does not seem possible to hide the close button on all SfChips when they are of type "Input". At the moment, I am working with a little hack to work around this using a custom IValueConverter implementation that converts a boolean value to a SfChipsType based on a property.

Some help would be much appreciated! Thanks

Cheers
Julian

4 Replies 1 reply marked as answer

HM Hemalatha Marikumar Syncfusion Team June 15, 2020 12:26 PM UTC

Hi Julian, 
 
Greetings from Syncfusion. 
 
Query: How to hook up my Command and CommandParameter? 
 
We would like to let you know that Input type ChipGroup itself enable the close button to its generated Chips in ChipGroup. While tapping close button, that particular chip automatically removed from view as well as in collection. If your requirement to have an individual Command support for Input type chip items then, please use the EventToCommand behaviour we can use the command as given below.  
 
Code snippet:  
 
In case, used ChipLayout as FlexLayout then, 
 
<FlexLayout.Behaviors> 
                        <local:EventToCommandBehavior EventName="ChildRemoved" Command="{Binding ClickCommand}" /> 
  </FlexLayout.Behaviors>  
   
 
ChildRemoved even itself, you can intervene in it. 
 
Query: Hide the close button on all SfChips when they are of type "Input" 
 
In case of Input type, we have handled the ShowCloseButton property in source level. Hence with it, directly we won’t change that close button visibility.  
 
But it has been achieved by using Template support of ChipGroup. By passing the SfChip as template view of ChipGroup then handling the ShowCloseButton property we can achieve this. But currently touch related we have faced the some complex. Hence, we have logged a feature for “Support to recognize the tap action on close button in chip group “ as feature and we have already logged a feature request on this, and it can be tracked through our feedback portal below.   
  
  
Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have immediate plan to implement this feature since we committed with already planned work. So, this feature will be available any of our upcoming release.  
  
If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  
  
I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 
 
Regards,
Hemalatha M. 


Marked as answer

JU Julian June 15, 2020 04:34 PM UTC

Hi Hemalatha,

thank you for your quick reply.

I will try the EventToCommand behavior. I hadn't considered that before, because I thought that in that case I could only react to the event that is triggered AFTER the element gets removed from the collection that is used as the ItemSource. However, I need to handle the removal from the collection myself, just like I can in the SfListView. If this is possible using the EventToCommand behavior, then that will surely solve my problem. I'll let you know if it worked as I expected.

The template support of ChipGroup isn't really working for me as it requires a lot of extra work to get where I want (just hide the close button), so I guess I have to live with my hack for now, where I simply use a bound bool property which is then converted to a SfChipType.

Thanks and best regards
Julian



JU Julian June 15, 2020 05:24 PM UTC

It works like a charm this way:

<FlexLayout.Behaviors>
     <behaviors:EventToCommandBehavior EventName="ChildRemoved" Command="{Binding RemoveTagCommand}" Converter="{x:StaticResource EventArgsToChipText}"/>
</FlexLayout.Behaviors>

Thank you very much!


HM Hemalatha Marikumar Syncfusion Team June 16, 2020 10:58 AM UTC

Hi Julian, 
 
We are glad to hear that given solution works.

Please let us know if you need any further assistance, don’t hesitate to contact us. 
 
Regards,
Hemalatha M. 


Loader.
Up arrow icon