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

Mvvm listview clicked item to navigate show details in another page of clicked item

Hi,

          I want to passing parameter of clicked item to another page and show details.
I mean when the user  clicked one item then it will navigate to another page and show the details of clicked item.

Thank you, :)

7 Replies

DB Dinesh Babu Yadav Syncfusion Team May 23, 2019 09:00 AM UTC

Hi Logesh, 
 
Thanks for using Syncfusion products. 
 
To achieve your requirement using command in MVVM, you need to pass the CommandParameter as `.` which passes the data model as its BindingContext to ViewModel. And, you have to set the BindingContext of the navigating NewPage as Model. You can also use TapCommand of SfListView to achieve your requirement which will have its default parameter as ItemTappedEventArgs.  
 
To know more about TapCommand, please refer our documentation here. 
 
We have attached the tested sample for your reference, please find the sample from below.  
  
 
MainPage 
 
<listView:SfListView x:Name="listView"ItemsSource="{Binding contactsinfo}"> 
        <listView:SfListView.ItemTemplate> 
          <DataTemplate> 
               <ViewCell> 
                    <ViewCell.View> 
                         <Grid x:Name="grid" RowSpacing="1"> 
                               <Grid.GestureRecognizers> 
                                  <TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Name=listView}}"  
                                       CommandParameter="{Binding .}"/> 
                                </Grid.GestureRecognizers> 
                          </Grid> 
                                      </ViewCell.View> 
                </ViewCell> 
          </DataTemplate> 
    </listView:SfListView.ItemTemplate> 
</listView:SfListView> 
 
ViewModel 
public class ContactsViewModel : INotifyPropertyChanged 
{                            
    public Command<object> TapCommand { get; set; } 
 
    public ContactsViewModel() 
    { 
        TapCommand = new Command<object>(OnItemtapped); 
    }    
 
    private void OnItemtapped(object obj) 
    { 
        var newPage = new NewPage(); 
        newPage.BindingContext = obj as Contacts; 
        App.Current.MainPage.Navigation.PushAsync(newPage);   
    } 
} 
 
Please let us know if you need any further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 



MM Martin Márki November 15, 2020 05:18 PM UTC

Dear Dinesh,

I would like to ask your assistance.
I have 4 syncfusion listview pages in my app and the user should pick one item from each of those pages.

How can I show these 4 tapped item details in the last page?

Many thanks,
Martin


SS SaiGanesh Sakthivel Syncfusion Team November 16, 2020 04:27 PM UTC

Hi Martin, 

Thanks for using Syncfusion products.
 
 
#Regarding SelectedItem in the NavigationPage. 
We would like to inform you that you can achieved your requirement with the help of SelectionChanged event in SfListview. Inside the event, add and remove the selected item in the collection and navigate the new page with help of button click and bind the selecteitem collection to the navigate page listview. We have prepared the sample as per your requirement and attached the demo sample in the following link for your reference. 
 
 
We hope this helps. 
 
Regards, 
SaiGanesh Sakthivel 



MM Martin Márki November 17, 2020 02:46 PM UTC

Dear SaiGanesh,


This solution works perfectly. In my application if the user click one item from the list, it navigates to the next page. There are 4 pages with list one after another.

How can I show ALL items that the user picked from the list from ALL of the previous pages in the last page?

Thanks for your help.

Regards,
Martin


LN Lakshmi Natarajan Syncfusion Team November 18, 2020 12:30 PM UTC

Hi Martin, 
 
Thank you for the update. 
 
We have checked the reported query “How to show the selected items in the last page” from our side. You can achieve your requirement by maintaining a common collection and add the selected items to this collection. Please refer the following code snippets for more reference, 
 
App.xaml.cs: Define SelectedItems collection. 
   public partial class App : Application 
    { 
        public static ObservableCollection<Contacts> SelectedItems { get; set; } 
        public App() 
        { 
            InitializeComponent(); 
            SelectedItems = new ObservableCollection<Contacts>(); 
            MainPage = new NavigationPage(new Views.ListViewPage1()); 
        } 
... 
 
ListViewPage.xaml.cs: Add the selected item to the collection. 
public partial class ListViewPage1 : ContentPage 
{ 
    public ListViewPage1() 
    { 
        InitializeComponent(); 
    } 
 
    private async void listView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
    { 
        App.SelectedItems.Add(e.ItemData as Contacts); 
        var nextPage = new ListViewPage2(); 
        await Navigation.PushAsync(nextPage); 
    } 
} 
 
In the last page, set the SelectedItems collection to the SfListView.ItemsSource in the OnAppearing override method. 
public partial class ListViewPage4 : ContentPage 
{ 
    public ListViewPage4() 
    { 
        InitializeComponent(); 
    } 
 
    protected override void OnAppearing() 
    { 
        base.OnAppearing(); 
 
        listView.ItemsSource = App.SelectedItems; 
    } 
} 
 
Please find the sample based on your requirement from the following link, 
 
You can also maintain separate ViewModel for the last page and maintain collection in it instead of App.xaml.cs class. 
 
We hope this helps. Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 



MM Martin Márki November 18, 2020 06:11 PM UTC

Hi Lakshmi,

Many thanks for your assistance. It solved my problem and works perfectly.

Best regards,
Martin


LN Lakshmi Natarajan Syncfusion Team November 19, 2020 03:12 AM UTC

Hi Martin, 
 
Thank you for the update. 
 
We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon