We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

ItemSource not binding converting from ListView to sfListView

I am converting a native Xamarin Forms ListView in my application and replacing with sfListView ... when I run it, the binding no longer works as it just repeats the collection name over and over. An ideas? Here is my XAML which works when using <ListView instead of <syncfusion:SfListView

    <ContentPage.BindingContext>
        <viewModels:YoutubeViewModelOfficial/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout Padding = "5,10"
              BackgroundColor="White">
            <Label Text = "Official Videos"
           TextColor="Black"
           FontSize="22"/>
            <syncfusion:SfListView x:Name="mylistView" ItemsSource = "{Binding YoutubeItems}"
              ItemTapped="ListViewOnItemTapped">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation = "Vertical"
                        Padding="10,10,10,20">
                            <Label Text = "{Binding Title}"
                             TextColor="Black"
                             FontSize="22"/>

ListView no longer displays values....

5 Replies

MK Muthu Kumaran Gnanavinayagam Syncfusion Team September 25, 2017 05:55 AM UTC

Hi Russ, 
 
Thank you for using Syncfusion products. 
 
We have checked with your reported query “Binding items inside ItemTemplate does not work” from our side and referred the attached code snippets. We would like to let you know that you have wrongly bound Xamarin.Forms ListView’s ItemTemplate instead of Synfusion SfListView’s ItemTemplate. Due to this, the binding is not set for the items inside ItemTemplate property as the BindingContext and ItemsSource of ListView will be null. You can use the SfListView’s ItemTemplate property as like below code example. 
 
Code example[XAML]: 
<syncfusion:SfListView x:Name="listView" ItemSize="70" ItemSpacing="0,0,5,0" 
                     ItemsSource="{Binding ContactsInfo}"> 
  <syncfusion:SfListView.ItemTemplate> 
     <DataTemplate> 
        <Grid x:Name="grid" > 
           <Label LineBreakMode="NoWrap" Text="{Binding ContactName}"/> 
        </Grid> 
     </DataTemplate> 
  </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView> 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu Kumaran. 



RF Russ Fustino September 25, 2017 09:12 PM UTC

Awesome. I knew it was something simple. Much appreciated and it works now.



DB Dinesh Babu Yadav Syncfusion Team September 26, 2017 03:38 AM UTC

Hi Russ, 
 
Thanks for the update. 
 
Dinesh Babu Yadav 
 



IN imam nawawi November 13, 2018 02:05 AM UTC

excusme.... i have same problem but i am using react js...
if i use template={this.myTemplate} list not displayed but list displayed without template


JN Jayaleshwari N Syncfusion Team November 13, 2018 06:40 AM UTC

Hi Imam,  
 
We are suspecting that the issue is occurred due to misspelled Template name or missed to map the dataSouce key in JSXTemplate of react. Refer to the below code snippet to use the template in React.  
 
public myTemplate(data: any): JSX.Element {  
    let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>  
    let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>  
  
    return (  
        <div className='e-list-wrapper e-list-multi-line e-list-avatar'>  
            {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}  
            <span className="e-list-item-header">{data.Name}</span> // {data.Name} is correct Binding  
            <span className="e-list-content">{data.contact}</span>  
        </div>  
    );  
}  
 
For your convenience we have prepared a sample and attached below. Please refer to our sample for ListView Template in React : Sample  
 
We recommend you to refer the below links to explore more about ListView.  
 
 
 
If you still face any issues in ListView Template, Please share more details about your application and ListView Template and dataSource.  
 
Please let us know if you need further assistance on this.  
 
Regards,  
Jayaleshwari N 


Loader.
Live Chat Icon For mobile
Up arrow icon