RadListView SelectedItemStyle and missing SelectionChangedCommand

1 Answer 74 Views
ListView
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 14 May 2023, 06:07 PM
  1. I cannot realize some simple things with RadListView:

    1.  I want to set the background color of the selected item.
        RadListView offers the poperty SelectedItemStyle. But nothing
        happens when I click on an item. I've extended for example the ControlSamples
        project:
             ListViewControl => FirstLookExample => FirstLookView.xaml

           line 15: <telerik:RadListView x:Name="listView"
                                 IsItemsReorderEnabled="True"
                                 ItemsSource="{Binding People}"
                                 SelectionMode="Single">
                                <telerik:RadListView.SelectedItemStyle>
                                     <telerik:ListViewItemStyle
                                         BackgroundColor="#FFFF0000"
                                         BorderColor="#FF00FF00" />
                               </telerik:RadListView.SelectedItemStyle>

         When I click on an item, the background remains white.

    2. RadListView has no property "SelectionChangedCommand". How to assign such a command
       from a viewmodel to RadListView?

       With a CollectionView all works fine. But there I cannot switch on the reordering feature with a simple flag.

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 15 May 2023, 05:09 AM

Hi Rolf,

I cannot reproduce the behavior with selected item style. On my side the style applies as expected (images  attached). I have tested on Android and WinUI. I have noticed you have added a border color, but no border location and width properties. Here is my setup:

<telerik:RadListView.SelectedItemStyle>
    <telerik:ListViewItemStyle BackgroundColor="#FFFF0000" 
                                BorderWidth="2" 
                                BorderLocation="All"
                                BorderColor="#FF00FF00" />
</telerik:RadListView.SelectedItemStyle>

Regarding to the SelectionChangedCommand, we have such command - SelectionChangedCommand. All commands are described here: https://docs.telerik.com/devtools/maui/controls/listview/commands and all events are described here: https://docs.telerik.com/devtools/maui/controls/listview/events 

The command context of the SelectionChangedCommand is SelectionChangedCommandContext. Example:

<telerik:RadListView.Commands>
    <telerik:ListViewUserCommand Id="SelectionChanged" Command="{Binding SelectionCommand}"/>
</telerik:RadListView.Commands>

and the ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<Book>{
            new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
            new Book{ Title = "Divergent",  Author = "Veronica Roth"},
        };

        this.SelectionCommand = new Command<SelectionChangedCommandContext>(this.SelectionChanged);
    }

    private void SelectionChanged(SelectionChangedCommandContext obj)
    {
        // your logic here
    }

    public ICommand SelectionCommand { get; set; }
    public List<Book> Source { get; set; }
}

Regards,
Didi
Progress Telerik

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 15 May 2023, 01:10 PM

Hi Didi,

Thank you for your quick response.
Calling the SelectionChangedCommand now works.

My ViewModel uses the MVVM Community Toolkit. What does the property for the "SelectedItem" parameter in the ViewModel have to look like then?
My current code:

<telerik:RadListView SelectedItem="{Binding SelectedListItem}"
...

[ObservableProperty]
public ListItem selectedListItem;

always returns null.


Regarding the background color of the selected item, we probably have different
examples used. You used "SDKBrowser" and I used "ControlsSamples".
Strangely it works in the SDKBrowser but not in ControlsSamples.
Do you have an explanation for that?

Regards,

Rolf

Didi
Telerik team
commented on 18 May 2023, 10:43 AM

Hi, 
You can open new forum thread or support ticket for new questions you have, this way the content in the current forum thread will be for the question asked. 

Regarding to the SelectedItem use the InotifyPropertyChanged interface:
 private Book selected;

    public Book SelectedItem 
    {
        get => this.selected;
        set
        {
            this.UpdateValue(ref this.selected, value);
        } 
    }
it works as expected. I am not familiar with community toolkit property changed and how they handle this cases. 

Regarding to the SelectedStyle - I have used a sample app, I didn't test in SDK or Controls Samples. I have used the Controls Samples ListView FirstLook example and the reason the SelectedItemStyle does not apply is because the SelectionMode is set to None. https://github.com/telerik/maui-samples/blob/86b69edc4f38bac8561e599df22d232ecff7691f/Samples/ControlsSamples/Examples/ListViewControl/FirstLookExample/FirstLookView.xaml#L17 there isn't a selection, and the behavior is expected. 
Tags
ListView
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Didi
Telerik team
Share this question
or