Click on Button In ItemTemplate and Invoke SelectedItem

[Ron Rex]

Hi,

I wanted to Click a button that I have in the Syncfusion ListView ItemTemplate and Invoke the ItemSelected for that row the button is on and get Information about the row In the Model that the ListView is bound to. I want to do this using the ViewModel and no code behind. I want to make sure that the user can only select an item by the clicking of the button and not clicking an item. 

Thanks and regards,

RR

[Jayashree Ravishankar]

Hi Ron Rex,

We have checked the reported query. You can bind the SelectedItem property of SfListView and update the selected item value through command action of button to perform the item selection. Also you can get current model item details by passing the binding context in CommandParameter. 

If you want select an item only by clicking on button, you have to set e.Handled as true in Item TapCommand.

 

Please see the attached code snippet and sample for more reference and let us know if you have any other queries.

Code Snippet:

MainPage.xaml

<listView:SfListView x:Name="listView" SelectionMode="Single"

                     SelectedItem="{Binding SelectedItem}"                           

                     SelectionBackground="LightGreen"

                     TapCommand="{Binding TapCommand}"

                     AutoFitMode="Height" ItemsSource="{Binding Items}">

    <listView:SfListView.ItemTemplate>

        <DataTemplate>

            <StackLayout Spacing="2">

                <Label Text="{Binding Title}"></Label>

                <Button HorizontalOptions="Start"  WidthRequest="200" Text="{Binding ButtonText}"

                        Command="{Binding Source={x:Reference listView},Path=BindingContext.ClickCommand}"

                        CommandParameter="{Binding .}"/>

                <StackLayout HeightRequest="1" Background="LightGray"/>

            </StackLayout>

        </DataTemplate>

    </listView:SfListView.ItemTemplate>

</listView:SfListView>

ViewModel.cs

 private object? selectedItem;

 public ICommand ClickCommand { get; set; }

 public ICommand TapCommand { get; set; }

 public ViewModel()

 {         

     ClickCommand = new Command<Model>(ButtonClickAction);

     TapCommand = new Command<Syncfusion.Maui.ListView.ItemTappedEventArgs>(ItemTapped);

 }

 private void ButtonClickAction(Model obj)

 {

    this.SelectedItem = obj;           

 }

 

 private void ItemTapped(Syncfusion.Maui.ListView.ItemTappedEventArgs e)

 {

    e.Handled = true;

 }

 

Regards,

Jayashree

Attachment: ListViewMaui_20381b48.zip

[Ron Rex]

I greatly appreciate your help. But I am using the CommunityToolkit.MVVM and I dont know exactly why this code is not working for me. I dont know if these line(s) of code would be a problem...

 ClickCommand = new Command<Model>(ButtonClickAction);

private void ButtonClickAction(Model obj)

{

    this.SelectedItem = obj;

 

}

[Diwakar Venkatesan]

Ron Rex, 

We have analyzed your query and modified the sample using CommunityToolkit.MVVM with Command properties and it is working as expected.

Also, we modified the Property and Command initialization based on CommunityToolkit.MVVM and attached below for your reference.

   public partial class ViewModel : ObservableObject

   {

       [ObservableProperty] private ObservableCollection<Model>? items;

 

       [ObservableProperty] private object? selectedItem;

 

       public ViewModel()

       {

           items = new ObservableCollection<Model>();

      }

 

       [RelayCommand]

       private void ButtonClickAction(Model obj)

       {

           this.SelectedItem = obj;           

       }

 

       [RelayCommand]

       private void ItemTapped(Syncfusion.Maui.ListView.ItemTappedEventArgs e)

       {

           e.Handled = true;

       }

   }

Hope this information will helps you. If you still facing the reported issue, please share the code snippet or the reproducible sample. So that we can be able to validate and provide you with better solutions.

Regards,

Diwakar V

Attachment: ListViewMaui_338888c4.zip