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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ItemSource not binding converting from ListView to sfListView

Thread ID:

Created:

Updated:

Platform:

Replies:

132830 Sep 24,2017 01:48 AM UTC Nov 13,2018 06:40 AM UTC Xamarin.Forms 5
loading
Tags: SfListView
Russ Fustino
Asked On September 24, 2017 01:48 AM UTC

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....

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On 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. 


Russ Fustino
Replied On September 25, 2017 09:12 PM UTC

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


Dinesh Babu Yadav [Syncfusion]
Replied On September 26, 2017 03:38 AM UTC

Hi Russ, 
 
Thanks for the update. 
 
Dinesh Babu Yadav 
 


imam nawawi
Replied On 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

Jayaleshwari N [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;