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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfChipGroup: Command with Type=Input

Thread ID:

Created:

Updated:

Platform:

Replies:

142841 Feb 21,2019 02:52 PM UTC Apr 1,2019 10:04 AM UTC Xamarin.Forms 11
loading
Tags: SfChipGroup
Matteo Comi
Asked On February 21, 2019 02:52 PM UTC

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

Selva Kumar  Veerakrishnan [Syncfusion]
Replied On 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. 



Matteo Comi
Replied On 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?

Selva Kumar  Veerakrishnan [Syncfusion]
Replied On 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. 


Matteo Comi
Replied On 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

Vanaja  Annasamy [Syncfusion]
Replied On 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.


Matteo Comi
Replied On 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

Dhanasekar R [Syncfusion]
Replied On 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 


Matteo Comi
Replied On 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

Mugundhan Saravanan [Syncfusion]
Replied On 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. 
  
  


Matteo Comi
Replied On March 29, 2019 01:33 PM UTC

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

Regards,
Matteo

Mugundhan Saravanan [Syncfusion]
Replied On 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.

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

;