How to bind sfcombobox placed in itemtemplate of sflistview?

[Santhosh Kumar]

Hi,

I have a sfcomboxbox within a sflistview. 

1. I want to populate the combobox with values at runtime.

2. Set the selected value of the combobox based on the datasource of the listview.

I tried the following but it doesn't work. The combobox is empty. Below is what I'm trying to do:

XAML

 <listview:SfListView x:Name="listview" IsStickyHeader="True" BackgroundColor="#f8f8f8"

                                                SelectionGesture="Tap" SelectionMode="Single" 

                                                ItemsSourceChangeCachingStrategy="RecycleItems" ListViewCachingStrategy="RecycleTemplate"

                                                VerticalOptions="FillAndExpand" IsScrollBarVisible="True" HeightRequest="450"

                                                         ItemSpacing="5,10,5,10" ItemSize="300" 

                                                         >

<listview:SfListView.ItemTemplate>

     <DataTemplate>

          

               <StackLayout>

                                                                        <Label Text="Samples" 

                                    HorizontalOptions="Start" VerticalOptions="Center" Style="{StaticResource LabelStyleNormal}" WidthRequest="100"/>

                                                                        <combobox:SfComboBox x:Name="cboSampleItem" DataSource="{Binding samples}"

                                                     DisplayMemberPath="Key" SelectedValuePath="Value" SelectedValue="{Binding <Code from listview's itemssource>}"

  HeightRequest="50"  HorizontalOptions="FillAndExpand">

                                                                           

                                                                        </combobox:SfComboBox>

                                                                    </StackLayout>

</DataTemplate>

                                        </listview:SfListView.ItemTemplate>

                                    </listview:SfListView>

Code behind

1. To populate the combo

public List<ListSource> lsrc = new List<ListSource>();

then when the page is loading lsrc is populated with a db call.

lsrc has items but this does not load the combo. The combobox is empty.

2. listview.itemssource= <dbcall()>

When list view is bound, I want the combobox's selected value to bound based on listview's itemssource property.

I tried the below links but it does not work for me:

https://www.syncfusion.com/forums/143117/sfcombobox-not-showing

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Combo_Sample-13607788.zip

What am I missing?

3. After getting the above to work, any selection change in the combobox should update the underlying datasource of the listview. Is there a setting that I need to do or will it happen automatically.

Thanks

Santhosh

[Lakshmi Natarajan]

Hi Santhosh, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported queries from our side. We would like to inform you that you can load the SfComboBox in the SfListView.ItemTemplate.  

 

Please refer to the following code snippets to achieve your requirement, 

XAML 

<listView:SfListView x:Name="listView"  

                        ItemsSource="{Binding ContactInfo}"  

                        ItemSpacing="10" 

                        AutoFitMode="Height"> 

    <listView:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Frame BorderColor="Blue"> 

                <Grid> 

                    <Grid.RowDefinitions> 

                        <RowDefinition Height="0.5*"/> 

                        <RowDefinition Height="0.5*"/> 

                    </Grid.RowDefinitions> 

 

                    <sfCombo:SfComboBox  Grid.Row="0" Text="Selecione uma cor"  

                                            DataSource="{Binding ContactDetails}" 

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

                                            DisplayMemberPath="ContactName" > 

                        <sfCombo:SfComboBox.ItemTemplate> 

                            <DataTemplate> 

                                <StackLayout > 

                                    <Label Text="{Binding ContactName}" VerticalTextAlignment="Center" /> 

                                </StackLayout> 

                            </DataTemplate> 

                        </sfCombo:SfComboBox.ItemTemplate> 

                    </sfCombo:SfComboBox> 

                    <Label Grid.Row="1" Text="{Binding Location}"/> 

                </Grid> 

            </Frame> 

        </DataTemplate> 

    </listView:SfListView.ItemTemplate> 

</listView:SfListView> 

 

#Regarding any selection change in the combobox should update the underlying datasource of the listview. Is there a setting that I need to do or will it happen automatically 

 

You can update the underlying property value based on the ComboBox selection by using BindingMode as TwoWay for the SelectedItem API.  

 

We have prepared a sample based on the requirement and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/165078/ze/ListViewCombo2093923712 

 

 

Please check our sample and let us know if this helps. 

 

Regards, 

Lakshmi Natarajan