SfCombobox Itemtemplate Customization

[Shahid Abbas]

Please help me to implement space or separator between items in Sfcombox i used various technique but I couldn't able to succeed

[Anandraj Selvam]

Hi Shahid Abbas, 

  

We have validated the reported query and you can resolve this issue by using MultiSelectMode as Delimiter. The selected items can be divided with a desired character given for a delimiter. 

  

User Guidance link: https://help.syncfusion.com/xamarin/combobox/multiple-selection#delimiter  

  

Note: It supports for all platforms. 

  

Please let us know if you have any other concerns. 

  

Regards, 

Anand Raj S. 

[Shahid Abbas]

My Issue not about MultiSelectMode. My issue about itemtemplate gap between items in list. 

[Anandraj Selvam]

Hi Shahid Abbas,  

  

Sorry for the inconvenience caused. 

  

We have validated the reported query and you can resolve this issue by using DropDownItemHeight to provide space between items or you can customize by providing line between suggestion items as below code snippet: 

  

 

XAML 

 

<combobox:SfComboBox 

            x:Name="comboBox" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            HeightRequest="40"> 

            <combobox:SfComboBox.ItemTemplate> 

                <DataTemplate> 

                    <StackLayout HeightRequest="100"> 

                        <StackLayout Orientation="Horizontal" VerticalOptions="Center"> 

                            <Image Source="User.png" WidthRequest="30" /> 

                            <Label Text="{Binding Name}" WidthRequest="150" /> 

                        </StackLayout> 

                        <BoxView 

                            BackgroundColor="Black" 

                            HeightRequest="2" 

                            HorizontalOptions="FillAndExpand" /> 

                    </StackLayout> 

                </DataTemplate> 

            </combobox:SfComboBox.ItemTemplate> 

        </combobox:SfComboBox> 

 

     

Please have the sample and screenshot for your reference.  

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_ItemTemplate55967576  

  

Screenshot: 

  

 

 

Please revert us for further investigation. 

   

Regards,  

Anand Raj S. 

[Shahid Abbas]

HeightRequest doesn't affect the code. if its changed no change affects in design

[Suganya Sethuraman]

Hi Shahid Abbas,

We have checked DropDownItemHeight API. This is working fine. Please have the code snippet for your reference,

Code snippet 

<StackLayout 

        Padding="30" 

        HorizontalOptions="Start" 

        VerticalOptions="Start"> 

    <combobox:SfComboBox 

            x:Name="comboBox" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            DropDownItemHeight="80" 

            HeightRequest="40"> 

        <combobox:SfComboBox.ItemTemplate> 

            <DataTemplate> 

                <StackLayout> 

                    <StackLayout Orientation="Horizontal" VerticalOptions="Center"> 

                        <Image Source="User.png" WidthRequest="30" /> 

                        <Label Text="{Binding Name}" WidthRequest="150" /> 

                    </StackLayout> 

                    <BoxView 

                            BackgroundColor="Black" 

                            HeightRequest="2" 

                            Margin="-10,0,0,0" 

                            VerticalOptions="EndAndExpand" 

                            HorizontalOptions="FillAndExpand" /> 

                </StackLayout> 

            </DataTemplate> 

        </combobox:SfComboBox.ItemTemplate> 

    </combobox:SfComboBox> 

</StackLayout> 

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Shahid Abbas]

Actually, we tried code snippet on my code, but there were no changes occur I will post my Combobox screenshot and code snippet here.We upload 3 screenshots first(1) we needed second(2) we got after putting the code and code snippet

Attachment: docs_bdc64bf1.rar

[Suganya Sethuraman]

Hi Shahid,

We have checked the screenshots. We have achieved your requirement using DropDownItemHeight property of SfComboBox as below code snippet,

Code snippet 

<combobox:SfComboBox 

            x:Name="comboBox" 

            AllowFiltering="True" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            DropDownItemHeight="60" 

            HeightRequest="40" 

            IsEditableMode="True" 

            MaximumDropDownHeight="300" 

            MultiSelectMode="None" 

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

            SuggestionMode="Contains"> 

            <combobox:SfComboBox.ItemTemplate> 

                <DataTemplate> 

                    <Grid> 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition Width="20" /> 

                            <ColumnDefinition Width="Auto" /> 

                        </Grid.ColumnDefinitions> 

                        <Frame 

                            Grid.Column="0" 

                            Margin="5,0" 

                            Padding="0" 

                            BackgroundColor="Red" 

                            CornerRadius="5" 

                            HeightRequest="10" 

                            HorizontalOptions="Start" 

                            VerticalOptions="Center" 

                            WidthRequest="10" /> 

                        <Label 

                            Grid.Column="1" 

                            FontSize="12" 

                            HorizontalOptions="FillAndExpand" 

                            Text="{Binding Name}" 

                            TextColor="Blue" 

                            VerticalOptions="Center" /> 

                    </Grid> 

                </DataTemplate> 

            </combobox:SfComboBox.ItemTemplate> 

        </combobox:SfComboBox> 

Screenshot
 

 

Please have the sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Drop-582924047

Please check and let us know if you have any queries.

Regards,
Suganya Sethuraman.


 

[Libin]

Hi Suganya,

Thank you for the reply. However, what we are trying to achieve is to allow the list items to have a dynamic, variable height based on the content. For example, one item may have 20 characters and the other may have 500 characters.

[Suganya Sethuraman]

Hi Libin,

Currently, we don’t have direct support for your requirement. So, we have considered “Provide dynamic height support based on the content of dropdown item in SfComboBox” as a feature and logged this as a feature request, and you can track the status of this feature implement through below link

Feedback link: https://www.syncfusion.com/feedback/24607

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we committed with already planned work. So, this feature will be available in any of our upcoming releases.

If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal.

Regards,
Suganya Sethuraman.