ItemSource not binding converting from ListView to sfListView

[Russ Fustino]

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]

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]

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

[Dinesh Babu Yadav]

Hi Russ, 

 

Thanks for the update. 

 

Regards, 

Dinesh Babu Yadav 

 

[imam nawawi]

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]

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.  

 

https://ej2.syncfusion.com/react/documentation/listview/customizing-templates#template  

 

https://ej2.syncfusion.com/react/demos/#/material/listview/template  

 

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