SfChipGroup selection indicator not showing when using a custom ItemTemplate

[Jona]

Hello,

I am trying to make a chipGroup with a custom ItemTemplate (to use it to select a color), and I am using the filter type so the SelectionIndicator can indicate the selected color. Without the custom ItemTemplate the indicator shows just fine, with the following code:

<buttons:SfChipGroup ChipPadding="2,0,0,0"
                                      HorizontalOptions="Center"
                                      SelectionIndicatorColor="#FF353535"
                                      ItemsSource="{Binding Colors}"
                                      ItemHeight="40"
                                      Type="Filter"
                                      SelectedItems="{Binding SelectedColorLeft}"/>

But whenever I set the ItemTemplate to a stacklayout and a chip, the indicator disappears. This is the code I add for the custom chip:

<buttons:SfChipGroup.ItemTemplate>
     <DataTemplate>
          <StackLayout>
               <buttons:SfChip BackgroundColor="{Binding}"
                                           SelectionIndicatorColor="White"/>
          </StackLayout>
     </DataTemplate>
</buttons:SfChipGroup.ItemTemplate>

Setting the ShowSelectionIndicator-property of the SfChip shows the indicator, but on all chips regardless of wether they are selected or not.

Does anyone know why the indicator disappears, and how to fix this? Thanks in advance!

-Jona

[Saravanan Madheswaran]

Hi joan, 

 

Greetings form Syncfusion.  

 

We would like to let you know that for template support, does not keep its default view (Filter – to show with indicator icon). We have achieved the requirement even in a template with the help of SelectionChanged event and keep the template view as SfChip with enabling the Selection indicator using ShowSelectionIndicator property in its added and remove items.  

 

Xaml: 

<buttons:SfChipGroup  

                     SelectionChanged="SessionListFilterOptions_SelectionChanged" 

                     > 

    <buttons:SfChipGroup.ItemTemplate> 

        <DataTemplate> 

            <StackLayout Orientation="Horizontal"> 

                <buttons:SfChip WidthRequest="40"  

                                ShowSelectionIndicator="{Binding IsChecked}"  

                                HorizontalOptions="EndAndExpand" BackgroundColor="{Binding BackgroundColor}" 

                               SelectionIndicatorColor="Green"> 

                </buttons:SfChip> 

            </StackLayout> 

        </DataTemplate> 

    </buttons:SfChipGroup.ItemTemplate> 

</buttons:SfChipGroup> 

 

C# 

private void SessionListFilterOptions_SelectionChanged(object sender, SelectionChangedEventArgs e) 

{ 

    if (e.AddedItem != null) 

    { 

        (e.AddedItem as Model).IsChecked = true; 

    } 

 

    if (e.RemovedItem != null) 

    { 

        (e.RemovedItem as Model).IsChecked = false; 

    } 

} 

 

Sample:  https://www.syncfusion.com/downloads/support/forum/156942/ze/CHIPGR~11502159457.zip  

 

 

 

Regards, 

Saravanan.