Is it possible to display the ItemTemplate for the selected item?

I'm porting a WPF app to Maui/SyncFusion and I have a ComboBox for selecting the line width.

In WPF, the selected item is displayed with the same ItemTemplate as displayed in the dropdown list.

Is it possible to do the same with SfComboBox? 

I'm considering overlaying a custom control to provide the visual and a 'dro-pown' button to control the underlying SfComboBox but would rather avoid that, if possible.

The attached zip contains a screen shot to illustrate what I'm trying to do.


Attachment: SfComboBoxSuggestion_662bd1d1.zip

3 Replies

SV Swetha Vasanthakumar Syncfusion Team May 23, 2023 10:51 AM UTC

Hi Daniel Travison,


We have validated your query " To display the ItemTemplate for the selected item" and
we would like to inform you that you can achieve this requirement by using DataTemplateSelector and ItemTemplate property. We have created a sample based on this and have attached a sample for your reference.


Code snippet:


XAML:

  <editors:SfComboBox Placeholder="Select an employee"

                            TextMemberPath="Name"

                            DisplayMemberPath="Name"

                            ItemsSource="{Binding Employees}"

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

                            WidthRequest="280"

                            HeightRequest="34"

                            x:Name="comboBox"

                            ItemTemplate="{StaticResource employeeTemplateSelector}">

            <editors:SfComboBox.BindingContext>

                <local:EmployeeViewModel/>

            </editors:SfComboBox.BindingContext>

        </editors:SfComboBox>


C#

public class EmployeeTemplateSelector : DataTemplateSelector {

    public DataTemplate EmployeeTemplate1 { get; set; }

    public DataTemplate EmployeeTemplate2 { get; set; }

 

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container) {

        var employeeName = ((Employee)item).Name;

        {

            if (item == ((SfListView)container).SelectedItem)

            {

              

                return EmployeeTemplate2;

            }

            else {

                return EmployeeTemplate1;

            }

        }

    }

}


Please refer to the below help documentation link for customizing the suggestion box

https://help.syncfusion.com/maui/combobox/ui-customization#customize-the-dropdown-suggestion-item

Could you please check the sample and let us know if you need any other details?


Regards,

Swetha V




Attachment: SfComboBox_forum_443c7d8.zip


DT Daniel Travison May 23, 2023 11:21 PM UTC

I understand what the example is doing but I'm looking to do something else.


In your example, when the ComboBox is 'collapsed', the TextMemberPath and a dropdown button is displayed. What I want to be able to do is use an ItemTemplate instead of TextMemberPath.   


In my use case, the dropdown displays a selection of line widths where each selection is a Pencil glyph drawing the associated line of the desired width.  Visually, it's clear what the result will be versus simply showing a list of numbers, such as 1.5, 2.0, 2.5, and when an item is selected, the same visual is displayed to the left of the dropdown button.


If I'm not explaining it clearly, the zip I attached above contains a screen shot showing a ComboBox in the expanded state.  The list of items is display as is the currently selected item next to the dropdown 



SV Swetha Vasanthakumar Syncfusion Team May 25, 2023 05:02 AM UTC

Hi Daniel Travison,

Currently, we don't have support to set item template in the input view field instead of text member path in SfComboBox and we have created a new feature request for this "Provide ItemTemplate support in input view field for non-editable mode in SfComboBox". Please find the below link for tracking the status of the feature implementation.

Feedback link: https://www.syncfusion.com/feedback/43959/provide-itemtemplate-support-in-inputview-field-for-non-editable-mode-in

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 have committed to already planned work. So, this feature will be available in any of our upcoming releases.

If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. We will share the release details in the feedback itself.


Loader.
Up arrow icon