SfChipGroup ItemTemplate without setting Width

[Simon]

Hello,

Currently it seems not to be possible let a SfChip inside of a SfChipGroup.ItemTemplate automatically determine it's width. All code examples I've found define a Width for the SfChip. When not setting the Width, the fill width of the parent control is used for a single SfChip, which doesn't really make sense if there are multiple SfChip to be displayed.

Is there a way to let the SfChip automatically determine it's optimal Width? Like it's already done without manually changing the Item template?

Thank you 

[Hariharan Chokkalingam]

Hi De,

Thank you for reaching out to us. We have investigated your query based on your update. However where unable to reproduce the reported issue "When not setting the Width, the fill width of the parent control is used for a single SfChip" from our end.  While using SfChip inside of a SfChipGroup.ItemTemplate, without setting width SfChip only takes text width as expected.
 

For your convenience, we have included the tested sample as an attachment. Please review the attached files and let us know if you have any concerns. If necessary, please make any required modifications and share the updated sample with us. This will help us guide you to resolve the issue on your end.

Please don’t hesitate to contact us if you have any queries.

Regards,

Hariharan C.

Attachment: ChipMaui_28d01624.zip

[Simon]

Thanks for your response. I've tried your sample and it works well. However, the issue seems to come back when defining a FlexLayout as the SfChipGroup.ChipLayout.

Could you try this code as well and see if there's something that should be changed?

 <VerticalStackLayout Spacing="10">
     <chip:SfChipGroup 
                        ItemsSource="{Binding Employees}"
                       Margin="10"
                       ChoiceMode="Single"
                       ChipType="Action">
         <chip:SfChipGroup.ChipLayout>
             <FlexLayout
                         Direction="Row"
                         Wrap="Wrap" />
         </chip:SfChipGroup.ChipLayout>
         <chip:SfChipGroup.ItemTemplate>


             <DataTemplate>
                 <ScrollView>
                     <chip:SfChip Text="{Binding Name}"/>
                 </ScrollView>
                
             </DataTemplate>
         </chip:SfChipGroup.ItemTemplate>


     </chip:SfChipGroup>


 </VerticalStackLayout>

For me the result is this:

Thank you in advance.

[Hariharan Chokkalingam]

Hi De,

Thank you for your patience. We have investigated your query based on the provided code snippet. We found that using FlexLayout to wrap the content and using SfChip in the SfChipGroup ItemTemplate causes it to take the whole parent width. To overcome this problem, we suggest you to using a Horizontal StackLayout in the ItemTemplate to place the chip horizontally and avoid taking up the full width. We have made some modifications to the provided snippet. Please refer to the attached sample and code snippets below for more details.

      <VerticalStackLayout Spacing="10">

          <chip:SfChipGroup

                      ItemsSource="{Binding Employees}"

                     Margin="10"

                     ChoiceMode="Single"

                     ChipType="Action">

 

              <chip:SfChipGroup.ChipLayout>

                  <FlexLayout

                       Direction="Row"

                       Wrap="Wrap" />

              </chip:SfChipGroup.ChipLayout>

 

              <chip:SfChipGroup.ItemTemplate>

                  <DataTemplate>

                          <HorizontalStackLayout>

                              <ScrollView>

                                  <chip:SfChip Text="{Binding Name}" />

                              </ScrollView>

                          </HorizontalStackLayout>

                  </DataTemplate>

              </chip:SfChipGroup.ItemTemplate>

 

          </chip:SfChipGroup>

      </VerticalStackLayout>

Please let us know whether the provided suggestion helps to resolve your query. Don’t hesitate to contact us if you have any concerns or queries.

Regards,

Hariharan C.

Attachment: ChipMaui_6aa2fd6b.zip

[Simon]

Thank you for your response, your idea work

[Preethi Rajakandham]

Hi,

You're welcome. We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R