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

How To: binding values to swipe templates

Hello,
is it possible to bind properties of a swipe template based on the item of the listview?

I'd like to create a swipe template with multiple buttons, but these buttons can be visible or hidden based on some properties of the item of the listview and not on the BindingContext of the view. Please find attached some excerpts of my code in order to better understand my question.

It would be even better to create a SfListView with Gridlayout as swipe template: would it be possible?


Thanks in advance,
Matteo

Attachment: example_d1eac7d2.zip

5 Replies

GP Gnana Priya Namasivayam Syncfusion Team February 26, 2019 05:09 PM UTC

Hi Matteo, 

Thanks for using Syncfusion product.
We have checked the reported query from our side. We would like to let you know that you can hide or show the view inside the swipe template by binding IsVisible property for the buttons in model.Because model will be the binding context for ItemTemplates of the listview.We have attached the sample in which we set visiblity for the button in swipe template based on property,please find the sample from below.

Sample link: http://www.syncfusion.com/downloads/support/forum/142908/ze/Swipe1139990698

Meanwhile , can you please let us know the purpose of using listview inside swipe template.Do you mean to load same list in item template inside swipe template?Can you please explain your requirement in detail which will help us to analyze your query better and provide appropriate solution from our end.
 

Regards, 
Gnana Priya N. 



MC Matteo Comi February 27, 2019 08:39 AM UTC

Hello,
thanks for the provided example. I will tyr it and get back to you.

The purpose of using listview with a gridlayout is to have a better disposition of the buttons. By using a grid I'm in fact forced to define rows and columns, and this could lead to empty spaces in the layout.


Regards,
Matteo


JN Jayaleshwari N Syncfusion Team February 28, 2019 12:10 PM UTC

Hi Matteo,  
  
We have prepared the sample based on your requirement to load listview inside swipe template.  
  
<syncfusion:SfListView ItemsSource="{Binding contactsinfo}" >  
   <syncfusion:SfListView.LeftSwipeTemplate>  
        <DataTemplate x:Name="LeftSwipeTemplate">  
             <Grid >  
                <syncfusion:SfListView ItemsSource="{Binding EmployeeEventItems}" AutoFitMode="Height">  
                     <syncfusion:SfListView.LayoutManager>  
                        <syncfusion:GridLayout SpanCount="2"/>  
                     </syncfusion:SfListView.LayoutManager>  
                     <syncfusion:SfListView.ItemTemplate>  
                        <DataTemplate>  
                           <Grid >  
                             <Button Text="{Binding Name}" />  
                           </Grid>  
                        </DataTemplate>  
                      </syncfusion:SfListView.ItemTemplate>  
                </syncfusion:SfListView>  
             </Grid>  
          </DataTemplate>  
      </syncfusion:SfListView.LeftSwipeTemplate>  
</syncfusion:SfListView>  
  
Maintain a property of type list to add collection in model.  
  
public class Contacts : INotifyPropertyChanged  
{  
    public List<EmployeeEvent> EmployeeEventItems  
    {  
         get { return employeeEventItems; }  
         set { employeeEventItems = value; }  
    }  
}  
public class EmployeeEvent  
{  
    public int ID { get; set; }  
    public string Name { get; set; }  
}  
  
In view model, you can add collection to listview inside swipe template like below.  
  
public class ContactsViewModel : INotifyPropertyChanged  
{  
     public ContactsViewModel()  
     {  
        contactsinfo = new ObservableCollection<Contacts>();  
        for (int i = 0; i < CustomerNames.Count(); i++)  
        {  
           var contact = new Contacts();  
         
           //add list into swipe template  
           List<EmployeeEvent> employeeEvents = new List<EmployeeEvent>();  
           for (int j = 0; j < 10; j++)  
               employeeEvents.Add(new EmployeeEvent { ID = j, Name = "Event " + j });  
           contact.EmployeeEventItems = employeeEvents;  
           contactsinfo.Add(contact);  
        }  
     }  
}  
  
We have attached the sample and screenshot for you reference and you can download from the following location. 
 
Screenshot :  
 
   
  
  
Please let us know if you would require any further assistance.  
  
  
Regards,                                                                    
Jayaleshwari N 



MC Matteo Comi March 4, 2019 11:31 AM UTC

Hello,
thank you very much for your update and your code. It works great and fits my needs.

Regards,
Matteo


AA Arulraj A Syncfusion Team March 4, 2019 11:37 AM UTC

Hi Matteo,   

Thanks for the update. 

We are glad to know that the provided solution worked at your end. Please let us know if you have any further queries on this. We are happy to help you. 

Arulraj A 


Loader.
Live Chat Icon For mobile
Up arrow icon