SfChipGroup: Command with Type=Input

[Matteo Comi]

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]

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. 

EventToCommand behavior link: https://github.com/xamarin/xamarin-forms-samples/tree/master/Behaviors/EventToCommandBehavior 

Code snippet: 

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

  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Chip-1483682584  

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

Regards, 

Selva Kumar V. 

[Matteo Comi]

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]

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.

 

 

https://help.syncfusion.com/xamarin/chips/customization 

 

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

 

Regards, 

Selva Kumar V. 

[Matteo Comi]

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]

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]

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]

Hi Matteo, 

 

Thanks for the update. Please get back to us if you have any further assistance on this. 

 

Regards, 

Dhanasekar 

[Matteo Comi]

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. 

EventToCommand behavior link: https://github.com/xamarin/xamarin-forms-samples/tree/master/Behaviors/EventToCommandBehavior 

Code snippet: 

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

  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Chip-1483682584  

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]

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;
            }
        } 

Sample: http://www.syncfusion.com/downloads/support/directtrac/231425/ze/SfChipSample470315726  

  

Thanks, 

Mugundhan S. 

  

  

[Matteo Comi]

Hello,

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

Regards,

Matteo

[Mugundhan Saravanan]

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.

[Ajith Gopalakrishnan]

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

[Hemalatha Marikumar]

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 

 

https://help.syncfusion.com/xamarin/chips/types 

 

https://help.syncfusion.com/xamarin/chips/events

https://www.syncfusion.com/kb/11155/how-to-select-a-multiple-chips-from-the-xamarin-chipgroup-sfchipgroup

https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChipGroup.html

I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 

 

Regards,
Hemalatha M.