SfChipGroup data template does not refresh background selected chip color on apply view model

[Jordi]

I'm working with sfChipGroup using a DataTemplate to avoid to show 'check image' when the chip is selected.

When apply my data model, SfChipGroup data template does not refresh background selected chip color. SelectedChipTextColor is successfull applied.

To activate the SelectedChipBackgroundColor I need to click on chip.

Here is my xaml code.

<buttons:SfChipGroup  Grid.Row="4"
                Type="Filter"
                x:Name="chipGroup"
                ChipTextColor="Black"
                ChipBackgroundColor="Transparent"
                SelectedChipTextColor="White"
                SelectedChipBackgroundColor="Blue"
                SelectionChanged="SessionListFilterOptions_SelectionChanged"
                ItemsSource="{Binding Chips}"
                ChipPadding="2,8,0,0"
                SelectionIndicatorColor="White" HorizontalOptions="Center">
                <!--<buttons:SfChipGroup.BindingContext>
                    <local:TimeRangeViewModel/>
                </buttons:SfChipGroup.BindingContext>-->
                <buttons:SfChipGroup.ItemTemplate>
                    <DataTemplate>
                        <buttons:SfChip  Text="{Binding Name}"
                                         InputTransparent="True"
                                         BorderColor="Black"
                                         BorderWidth="1"
                                         FontSize="10"
                                         TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}"
                                         BackgroundColor="{Binding Source={x:Reference chipGroup},Path=ChipBackgroundColor}"
                                         >
                            <buttons:SfChip.Triggers>
                                <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}"  Value="True" >
                                    <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/>
                                </DataTrigger>
                            </buttons:SfChip.Triggers>
                        </buttons:SfChip>
                    </DataTemplate>
                </buttons:SfChipGroup.ItemTemplate>
            </buttons:SfChipGroup>

Briefly, this is my ViewModel:

 public class Chip:BaseViewModel
    {
        public string Name { get; set; }

        bool isChecked;
        public bool IsChecked {
            get
            {
                return isChecked;
            }
            set
            {
                isChecked = value;
                NotifyPropertyChanged();
            }
        }
    }

public class TimeRangeViewModel : BaseViewModel
{
 public ObservableCollection<Chip> Chips { get; set; }


 public TimeRangeViewModel()
        {
           Chips = new ObservableCollection<Chip>
            {
                new Chip(){Name="Lun"},
                new Chip(){Name="Mar"},
                new Chip(){Name="Mie"},
                new Chip(){Name="Jue"},
                new Chip(){Name="Vie"},
                new Chip(){Name="Sab"},
                new Chip(){Name="Dom"}
            };


        }
}

We set IsChecked in some Chips and the result is: (Only ChipSelectedText is changesd

but the desired would be: (I get clicking on selected)

[Yuvaraj Palanisamy]

Hi Jordi,

We have analyzed your query and you have achieved your requirement “Selection without selection image” and update the selected chip text color with the help of updating IsChecked property value. Please find the code example below.

<buttons:SfChipGroup x:Name="chipGroup"

                     Type="Filter"

                     ChipTextColor="Black"

                     ItemsSource="{Binding Chips}"

                     ChipBackgroundColor="Transparent"

                     SelectedChipTextColor="White"

                     SelectedChipBackgroundColor="Blue"

                     SelectionChanged="SessionListFilterOptions_SelectionChanged"

                     ChipPadding="2,8,0,0"

                     SelectionIndicatorColor="White"

                     HorizontalOptions="Center"                          

                     ItemHeight="60">

 

    <buttons:SfChipGroup.ItemTemplate>

        <DataTemplate>

            <buttons:SfChip  Text="{Binding Name}"

                             CornerRadius="1"

                             InputTransparent="True"

                             BorderColor="Black"

                             BorderWidth="1"

                             FontSize="10"

                             TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}"

                             BackgroundColor="{Binding Source={x:Reference chipGroup},Path=ChipBackgroundColor}">

                <buttons:SfChip.Triggers>

                    <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}"  Value="True" >

                        <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/>

                    </DataTrigger>

                </buttons:SfChip.Triggers>

            </buttons:SfChip>

        </DataTemplate>

    </buttons:SfChipGroup.ItemTemplate>

   

</buttons:SfChipGroup>

 

private void SessionListFilterOptions_SelectionChanged(object sender, Syncfusion.Buttons.XForms.SfChip.SelectionChangedEventArgs e)

{

              if (e.AddedItem != null)

              {

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

              }

 

              if (e.RemovedItem != null)

              {

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

              }

}

 

We have attached the sample for your reference. Please find the sample from the below attachment.

Output:

Please let us know if you have any concern.

Regards,

Yuvaraj.

Attachment: SfChipSample_f632d132.zip

[Jordi]

Sure, this scenario works, but my question is different.

I'm working with MVVM and DataTemplate.

On Init, I load data and prepare the view model. Then I apply to component (Chips)

Just at this moment, the component shows the chips but only the SelectedChipTextColor is applied on chips with IsChecked=true. The background of chip is the same color that occurs when chip is not selected.

If now, I click on any chip it works successfully. The selectedbackground is applied successfully.

[Devakumar Dhanapoosanam]

Hi Jordi,

Query: The background of chip is the same color that occurs when chip is not selected.

We can resolve the reported problem of SfChipGroup ItemTemplate selected chip background color, by setting the chip BackgroundColor property with SelectedChipBackgroundColor same as chip TextColor property with the SelectedChipTextColor based on IsChecked value as per in the below code example.

<buttons:SfChipGroup x:Name="chipGroup"

                     Type="Filter"

                     ItemsSource="{Binding Chips}"

                     ChipTextColor="Black"

                     SelectedChipTextColor="White"

                     ChipBackgroundColor="Transparent"

                     SelectedChipBackgroundColor="Blue"

                     SelectionChanged="SessionListFilterOptions_SelectionChanged"

                     ChipPadding="2,8,0,0"

                     HorizontalOptions="Center"                          

                     ItemHeight="60">

    <buttons:SfChipGroup.ItemTemplate>

        <DataTemplate>

            <buttons:SfChip  Text="{Binding Name}"

                             CornerRadius="1"

                             InputTransparent="True"

                             BorderColor="Black"

                             BorderWidth="1"

                             FontSize="10"

                             TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}"

                             BackgroundColor="Transparent">

                <buttons:SfChip.Triggers>

                    <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}"  Value="True" >

                        <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/>

                        <Setter Property="BackgroundColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipBackgroundColor}"/>

                    </DataTrigger>

                </buttons:SfChip.Triggers>

            </buttons:SfChip>

        </DataTemplate>

    </buttons:SfChipGroup.ItemTemplate>
…

</buttons:SfChipGroup>

Output:

Please find the modified sample from the attachment below and let us know if you need any further assistance on this.

Incase if we misunderstand your query, could you please share more details or complete code snippet or if possible, share the issue reproducing sample by modifying the attached sample which will be helpful us to replicate the issue to provide the solution at earliest.

Regards,

Devakumar D

Attachment: SF_174723_ChipSample_360f65da.zip

[Jordi]

This model solves the chips apperance, but this not work properly when you click on Checked Chips.

You need twice clicks to synchronize its state.

With the first Click, the chip is then added to the chipGroup.SelectedItems. With the second click Checked is set to false and the apperance is correctly 'Not Checked'.

After trying some solutions, the problem is that Chips State is correctly applied from model, but chips are not added to chipGroup SelectedItems list. 

So, you see Chips as selected in apperance but from chipGroup component point of view they are not selected. You need to click to ensure chips are added to chipGroup SelectedItems.

I don't know how to add Chips with IsChecked=true to ChipGroup SelectedItems list from ViewModel. 

I think if this was possible, then problem would be solved.

[Yuvaraj Palanisamy]

Hi Jordi,

We have analyzed your query and you have achieved your requirement “Selection without selection image” and update the selected chip text color with the help of updating IsChecked property value. Please find the code example below.

<buttons:SfChipGroup x:Name="chipGroup"

                     Type="Filter"

                     ChipTextColor="Black"

                     ItemsSource="{Binding Chips}"

                     ChipBackgroundColor="Transparent"

                     SelectedChipTextColor="White"

                     SelectedChipBackgroundColor="Blue"

                     SelectionChanged="SessionListFilterOptions_SelectionChanged"

                     ChipPadding="2,8,0,0"

                     SelectionIndicatorColor="White"

                     HorizontalOptions="Center"                          

                     ItemHeight="60">

 

    <buttons:SfChipGroup.ItemTemplate>

        <DataTemplate>

            <buttons:SfChip  Text="{Binding Name}"

                             CornerRadius="1"

                             InputTransparent="True"

                             BorderColor="Black"

                             BorderWidth="1"

                             FontSize="10"

                             TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}"

                             BackgroundColor="{Binding Source={x:Reference chipGroup},Path=ChipBackgroundColor}">

                <buttons:SfChip.Triggers>

                    <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}"  Value="True" >

                        <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/>

                    </DataTrigger>

                </buttons:SfChip.Triggers>

            </buttons:SfChip>

        </DataTemplate>

    </buttons:SfChipGroup.ItemTemplate>

   

</buttons:SfChipGroup>

 

private void SessionListFilterOptions_SelectionChanged(object sender, Syncfusion.Buttons.XForms.SfChip.SelectionChangedEventArgs e)

{

              if (e.AddedItem != null)

              {

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

              }

 

              if (e.RemovedItem != null)

              {

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

              }

}

 

We have attached the sample for your reference. Please find the sample from the below attachment.

Output:

Please let us know if you have any concern.

Regards,

Yuvaraj.

Attachment: ChipSample_264674cb.zip