Confirm chip removal

[Ernest]

Hi,

When user clicks on close button in chip, is it possible first to show confirmation dialog and prevent removal if user chooses not to remove?

I could only find ItemRemoved event which implies that chip is already removed.

[Suyamburaja Jayakumar]

Hi Ernest, 

 

Greetings from Syncfusion.  

 

We would like to let you know that Your requirement has been achieved by using the ChipGroup ItemTemplate, ChipClicked Event and SfPopupLayout.  

  

Please check the code snippet below. 

XAML: 

<buttons:SfChipGroup  

                                    VerticalOptions="Center" ChipClicked="inputChipGroup_ChipClicked" 

                                    x:Name="inputChipGroup"  ChipBackgroundColor="Blue" 

                                    ItemsSource="{Binding InputItems,Mode=TwoWay}"   

                                    Type="Action" Command="{Binding ActionCommand}"  

                                    ChipPadding="8,8,0,0"> 

 

                <buttons:SfChipGroup.ChipLayout> 

                    <FlexLayout  

                                        HorizontalOptions="Start"  

                                        VerticalOptions="Center"  

                                        Direction="Row"  

                                        Wrap="Wrap"  

                                        JustifyContent="Start"  

                                        AlignContent="Start"  

                                        AlignItems="Start"/> 

                </buttons:SfChipGroup.ChipLayout> 

                <buttons:SfChipGroup.ItemTemplate> 

                    <DataTemplate> 

                        <buttons:SfChip Text="{Binding PersonName}" ImageSource="{Binding PersonImage}" 

                                       InputTransparent="True" 

                                       BorderColor="Transparent" 

                                       BorderWidth="0" 

                                       Padding="1" 

                                        ImageAlignment="End" 

                                       ShowIcon="True"  

                                        BackgroundColor="Blue" 

                                       ShowCloseButton="False"> 

                        </buttons:SfChip> 

                    </DataTemplate> 

                </buttons:SfChipGroup.ItemTemplate> 

            </buttons:SfChipGroup> 

            <sfPopup:SfPopupLayout x:Name="popupLayout" IsOpen="{Binding PopupOpen}"> 

                <sfPopup:SfPopupLayout.PopupView> 

                    <sfPopup:PopupView AppearanceMode="TwoButton" ShowHeader="False"  

                          AcceptCommand="{Binding PopupAcceptCommand}" 

                        DeclineCommand="{Binding PopupDeclineCommand}">      

                   . . . 

      </sfPopup:SfPopupLayout> 

 

Due to some internal architecture, we have limited the binding context of in-build chips. As a solution, we recommend setting the binding value from the internal "DataContext" property.  

 

C#: 

private void inputChipGroup_ChipClicked(object sender, EventArgs e) 

        { 

            popupLayout.Show(); 

            var sfChip = sender as SfChip; 

            if (sfChip != null) 

            { 

                var dataContext = GetInternalProperty(typeof(SfChip), sfChip, "DataContext"); 

                chipViewModel.ModelProperty = dataContext as Model; 

            } 

        } 

 

        public static object GetInternalProperty(Type type, object obj, string propertyName) 

        { 

            var property = type.GetTypeInfo().GetDeclaredProperty(propertyName); 

            if (property != null) 

            { 

                return property.GetValue(obj); 

            } 

 

            return null; 

        } 

 

ViewModel: 

public class ViewModel : INotifyPropertyChanged 

    { 

. . . .  

        private void PopupAccept(Object model) 

        { 

            InputItems.Remove(ModelProperty); 

        } 

 

        private void PopupDecline() 

        { 

            // You can write your set of codes that needs to be executed. 

        } 

 

        public ViewModel() 

        { 

            . . .  

            PopupAcceptCommand = new Command(PopupAccept); 

            PopupDeclineCommand = new Command(PopupDecline);  

        } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/167261/ze/ChipSelection188859411.zip  

 

More information please refer the below UG link, 

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

https://help.syncfusion.com/xamarin/popup/getting-started 

 

Please let us know if need any further assistance on this.  

 

Regards, 

Suyamburaja J.