How to get selected chip? How to preset a chip?

[Stephan Schrade]

Hi support,

I'm just trying to implement a chip group with choicemode=single

Can you please provide an example for the event Selectionchanged?

What is the best way to get the selected Item?

My current solution is

       Syncfusion.Maui.Core.SfChip chipItem = args.AddedItem as Syncfusion.Maui.Core.SfChip;

        string selected = chipItem.Text;

But this will not work, if the Text property depends on the selected language. Is there no individual value I can set and use this in the following code?

The other problem is:

How can I set a chip to "selected" from a variable?

On Navigating to the page I want to set the chip within the chipgroup depending on an internal variable?

Many thanks,

Stephan

[Brundha Velusamy]

Hi Stephan,

 

Query: What is the best way to get the selected Item?

 

We suggest you to use the SelectedItem property in SfChipGroup to retrieve the selected item as shown in the code snippet below. And the SelectionChanged event will trigger after the chip is selected. While using the SelectionChanged event, we can retrieve the newly selected item[AddedItem] and previously selected item[RemovedItem] from SfChipGroup. We have prepared the sample based on your requirement and attached the sample for your reference.

 

Please refer the  below help documentation link for more information about SfChipGroup

https://help.syncfusion.com/maui/chips/events#selectionchanged-event

 

Code snippet:

<SyncfusionChip:SfChipGroup x:Name="ChipGroup"

                                    HorizontalOptions="FillAndExpand" ChipStrokeThickness="1"

                                    ChipPadding="0,0,5,5"

                                    ItemHeight="40"

                                    Margin="0,15,0,0"

                                    DisplayMemberPath="Name"

                                   SelectedItem="{Binding SelectedPerson,Mode=TwoWay}"

                                    ItemsSource="{Binding Employees}"

                                    ChipType="Choice"

                                    ChoiceMode="Single"

                                    SelectionChanged="ChipGroup_SelectionChanged">

 

                                   …

 

</SyncfusionChip:SfChipGroup>

 

Please take a look at the provided sample and feel free to reach out if you have any further questions or concerns.

 

Regards,

Brundha V

Attachment: ChipSample_3072ba9c.zip

[Stephan Schrade]

Hi Brundha,

many thanks for your quick answer.

Your example pointed me to the right direction, so I could implement this in my environment.

This works now :-)

I have two remarks:

1.

My first version was to initialize the chips with this code from your example

	<chip:SfChipGroup.Items>
			<chip:SfChip Text="Extra Small"/>

Here I could set the FontAttribute to Bold but there is no property for that in the ChipGroup.

Do I have to use a chip layout for that?

2.

I'm using the chip group to switch the theme of my app to Dark or Light.

But when I do so, the color of the unselected chips do not change till I restart the app.

Only the selected chip changes its color.

The other elements on the page change their color immediately.

I'm using the feature VisualStateManager for that.

Many thanks, Stephan

[Brundha Velusamy]

Hi Stephan,

 

Query1: FontAttribute property not available in the SfChipGroup.

 

Currently, we don't have a FontAttribute support in SfChipGroup. So we recommend you to use the Chip control for utilize the FontAttribute support. We would like to inform that, FontAttribute support will be added to SfChipGroup in our upcoming Volume 3 release, which is expected to be released at the end of September.

 

Query2: The color of the unselected chips do not change in the SfChipGroup.

 

We were unable to reproduce the reported issue at our end. We have attached tested sample for your reference.  Kindly review the attached sample and apply any required modifications to reproduce the problem. Afterward, kindly forward the sample to us or share issue replication sample with replication steps and video, as it would enable us to conduct a more thorough investigation of the issue.

 

Regards,

Brundha V

Attachment: ChipGroupThemeSample_edf109cc.zip

[Stephan Schrade]

Hi Brundha,

many thanks for your example.

My settings are different.

I have different colors of the chip text and background depending on the theme.

Here ist my code:

                <VisualStateManager.VisualStateGroups>

                        <VisualStateGroupList>

                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal">

                                    <VisualState.Setters>

                                        <Setter Property="ChipTextColor" Value="{AppThemeBinding Light={StaticResource LightButtonSecondaryTextColor}, Dark={StaticResource DarkButtonSecondaryTextColor}}" />

                                        <Setter Property="ChipBackground" Value="{AppThemeBinding Light={StaticResource LightButtonSecondaryBackgroundColor}, Dark={StaticResource DarkButtonSecondaryBackgroundColor}}" />

                                    </VisualState.Setters>

                                </VisualState>

                                <VisualState x:Name="Selected">

                                    <VisualState.Setters>

                                        <Setter Property="ChipTextColor" Value="{AppThemeBinding Light={StaticResource LightButtonPrimaryTextColor}, Dark={StaticResource DarkButtonPrimaryTextColor}}" />

                                        <Setter Property="ChipBackground" Value="{AppThemeBinding Light={StaticResource LightButtonPrimaryBackgroundColor}, Dark={StaticResource DarkButtonPrimaryBackgroundColor}}" />

                                    </VisualState.Setters>

                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateGroupList>

                </VisualStateManager.VisualStateGroups>

Attached you will find a video which shows the behaviour during switching the theme and two screenshots to demonstrate the color settings in the different themes.

As you can see, only the selected chip changes its color according to the settings.

The other elements on the page are set with the same pattern. And as you can see, these colors are set correct.

Regards,

Stephan

Attachment: ThemeSwitching_ea3ba997.zip

[Brundha Velusamy]

Hi Stephan,

Thank you for your patience.

We have checked your query, "Dynamically selected chip and text color does not change" and we have reproduced the issue on our side and fixed the reported issue.

We're excited to announce that we've introduced new API's in the ChipGroup control to address a reported issue. Going forward, you can utilize the SelectedChipBackground and SelectedChipTextColor APIs to customize selected chip background and text color specifically for Choice and Filter chip types, instead of using the Visual State Manager. At present, a custom patch has been created for version 22.2.11. We have attached the NuGet file for your convenience.

Please refer the below code snippet for this

Code Snippet

<chip:SfChipGroup x:Name="ChipGroup"

                        DisplayMemberPath="Name"

                        ItemsSource="{Binding Employees}"

                        ChipType="Choice"

                        ChoiceMode="Single"

                        SelectionChanged="ChipGroup_SelectionChanged"

                        ChipTextColor="{AppThemeBinding Light={StaticResource Red}, Dark={StaticResource Black}}"

                        ChipBackground="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"

                        SelectedChipBackground="{AppThemeBinding Light={StaticResource Red}, Dark={StaticResource Green}}"

                        SelectedChipTextColor="{AppThemeBinding Light={StaticResource Green}, Dark={StaticResource Red}}">

</chip:SfChipGroup>

Please note that we have created this patch for version 22.2.11 specifically to resolve the issue reported in this ticket. If you have received other patches for the same version for other products, please apply all patches in the order received.

Note: Please refer to the below link to apply the custom patch.

https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

This feature will be available in our volume 4 release tentatively at the end of December/2023

Disclaimer: The inclusion of this solution in the main release may change due to other factors, including but not limited to QA checks and work reprioritization. The API name in the main release may be subject to change.

Regards,

Brundha V

Attachment: Syncfusion.Maui.Core.22.2.11_6c8c6de5.zip