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

SfChipGroup: Command with Type=Input

Hello,
I'm creating a SfChipGroup as in your Getting Started example in the documentation. I would like to have a dynamic group of SfChips having the close button and a Command binded to each, but I'm facing these issues:

- If I set Type property equals to Action and I bind a Command, I cannot see the close button and I cannot force it with ShowCloseButton property
- If I set Type property equals to Input and I bind a Command, I can see the close button but the Command is never executed.

Here is my code:

<buttons:SfChipGroup Margin="0,0,10,0"
                     ChipBackgroundColor="{StaticResource AppBackgroundColor}"
                     ChipBorderWidth="0"
                     ChipPadding="8,8,0,0"
                     ChipTextColor="{StaticResource ColoreFiltri}"
                     CloseButtonColor="{StaticResource ColoreFiltri}"
                     Command="{Binding RemoveChipCommand}"
                     DisplayMemberPath="DescValoreRisposta"
                     ItemsSource="{Binding ListaValoriRisposte}"
                     Type="Input">
    <buttons:SfChipGroup.ChipLayout>
        <FlexLayout AlignContent="Start"
                    AlignItems="Start"
                    ChildRemoved="Flex_ChildRemoved"
                    Direction="Column"
                    HorizontalOptions="FillAndExpand"
                    JustifyContent="Center"
                    VerticalOptions="Center"
                    Wrap="NoWrap" />
    </buttons:SfChipGroup.ChipLayout>
</buttons:SfChipGroup>

How can I solve my problem?

Thanks in advance,
Matteo

13 Replies

SK Selva Kumar  Veerakrishnan Syncfusion Team February 22, 2019 12:44 PM UTC

Hi Matteo, 

Greetings from Syncfusion. 

When using Type as Action, the complete chip item will behave as a button. Hence the Command will work. 

When using Type as Input, we will get the close button. For that close button we have close event. By using the EventToCommand behaviour we can use the command as given below. 


Code snippet: 
 <FlexLayout.Behaviors>
                        <local:EventToCommandBehavior EventName="ChildRemoved" Command="{Binding ClickCommand}" />
  </FlexLayout.Behaviors> 
  

Please let us know if you need any clarification on this. 

Regards, 
Selva Kumar V. 




MC Matteo Comi February 22, 2019 01:50 PM UTC

Hi,
thanks for your reply. I will try it on monday and let you know.

One more question: is it possibile to reduce the height of the chips? How?


SK Selva Kumar  Veerakrishnan Syncfusion Team February 25, 2019 12:44 PM UTC

Hi Matteo, 

 
Thanks for your response. 

 
We have a property named "ItemHeight" on SfChip. By using this property we can specify the height. 

 
Code snippet: 
 
<buttons:SfChipGroup ItemHeight="60" />

For more details about customising SfChip, please check the below given user guide documentation link.
 

 

 
Please let us know if you need any clarification on this. 

 
Regards, 
Selva Kumar V. 



MC Matteo Comi February 25, 2019 01:05 PM UTC

Hello,
I set ItemHeight to 10 and in the attachment you can see how it looks.
How can I show the text and reduce the size of the close button?

Thanks,
Matteo

Attachment: Screenshot_20190225140108_c2689140.zip


VA Vanaja  Annasamy Syncfusion Team February 27, 2019 03:47 AM UTC

Hi Matteo,


We have implemented the Chip control in which we have arranged separate views inside the chip like Selection Indicator, Close button and text. We have provided padding to place those views inside the Chip. So, it is necessary to provide minimum value of ItemHeight to 20 to display the whole view without being cropped inside Chip. So please use ItemHeight as specified for viewing the whole view. Please let us know if you have any concern on this.

Regards,
Vanaja R.A.



MC Matteo Comi February 27, 2019 08:35 AM UTC

Hi Vanaja,
thanks for your reply. I will try to put 20 as value of ItemHeight property and let you know if it fits my needs.

Regards,
Matteo


DR Dhanasekar R Syncfusion Team March 1, 2019 03:53 AM UTC

Hi Matteo, 
 
Thanks for the update. Please get back to us if you have any further assistance on this. 
 
Regards, 
Dhanasekar 



MC Matteo Comi replied to Selva Kumar  Veerakrishnan March 26, 2019 03:57 PM UTC

Hi Matteo, 

Greetings from Syncfusion. 

When using Type as Action, the complete chip item will behave as a button. Hence the Command will work. 

When using Type as Input, we will get the close button. For that close button we have close event. By using the EventToCommand behaviour we can use the command as given below. 


Code snippet: 
 <FlexLayout.Behaviors>
                        <local:EventToCommandBehavior EventName="ChildRemoved" Command="{Binding ClickCommand}" />
  </FlexLayout.Behaviors> 
  

Please let us know if you need any clarification on this. 

Regards, 
Selva Kumar V. 



Hello,
after a while I returned on this subject to complete the implementation of my chips.
Following your example, how do I get to the removed element? The DataContext property is not public and it cannot be returned.

Thanks in advance.

Regards,
Matteo


MS Mugundhan Saravanan Syncfusion Team March 28, 2019 12:53 PM UTC

Hi Matteo,  
Greetings from Syncfusion. 
We have validated the reported query. In order to get the removed item, you can use collection changed event. We have created a two-chip group to show the list of items which updates when the chip is being removed. Please have the sample and code snippet for your reference.   
Code Snippet: 
  
 employees.CollectionChanged += Employees_CollectionChanged; 
  
private void Employees_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove)
            {
                var removeditem = e.OldItems[0] as EmployeeDetails;
            }
        }
 
  
Thanks, 
Mugundhan S. 
  
  



MC Matteo Comi March 29, 2019 01:33 PM UTC

Hello,
your example helped me solve the issue. Thank you very much.

Regards,
Matteo


MS Mugundhan Saravanan Syncfusion Team April 1, 2019 10:04 AM UTC

Hi Matteo,

We glad that the reported problem resolved at your end. Please let us know if you have any other queries,


Regards,
Mugundhan S.


AG Ajith Gopalakrishnan April 30, 2020 12:33 PM UTC

Hello,

I am also facing he current situation, I am able to clear the option but the binding remains the same, Is there a way to get binding of which the value as been cleared. I am following a view model pattern . I am not download the sample from this thread.

Thanks in advance
Ajit


HM Hemalatha Marikumar Syncfusion Team May 1, 2020 03:38 PM UTC

Hi Ajith Gopalakrishnan, 
 
Thanks for your update. 
 
Query: Is there a way to get binding of which the value as been cleared? 
 
We would like to let you know that you get the cleared chip /model value from its CollectionChanged event of populated collection of SfChipGroup (if you are loaded as ObservableCollection) or else directly get from ChildRemoved event of FlexLayout as per in below screenshots 
 
ChildRemoved event in FlexLayout: 
 


 
CollectionChanged event with Remove action:

 
public ViewModel() 
        { 
            employees = new ObservableCollection<Person>(); 
            employees.CollectionChanged += Employees_CollectionChanged; 
            employees.Add(new Person() { Name = "John" }); 
            employees.Add(new Person() { Name = "James" }); 
            employees.Add(new Person() { Name = "Linda" }); 
            employees.Add(new Person() { Name = "Rose" }); 
            employees.Add(new Person() { Name = "Mark" }); 
        } 
 
        private void Employees_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) 
        { 
            if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove) 
            { 
                Person person = (e.OldItems)?[0] as Person; 
                DeletedChip = person; 
            } 
            if(e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add) 
            { 
 
            } 
        } 


Below demo sample to display the deleted chip’s text by keeping DeletedChip property in ViewModel
 
 
Sample Link: 
 
https://www.syncfusion.com/downloads/support/forum/153818/ze/GettingStarted428409187


On the provided code snippet, you have used SelectionChanged event. For your information, SelectionChanged event triggered only for Choice/Filter typed chip group. For Input type, it won’t triggered. To get your requirement, better to use ChipClicked event. 
 
To know more about this, please refer the below link 
 
 
 
Regards,
Hemalatha M.
 
 
 
 
 
 
 
  


Loader.
Up arrow icon