[Solved] Show a list of items with multi select

[RR]

I want to show a list of items with multi select on a click of a button. I figure our there are no dropdowns. Preferebly I would like to have a popup sort of component with list of items to select. Is this possible with PCL with out using native? 

 

Thankyou in advance

[Lance | Senior Manager - Technical Support]

Hello Roshan,

You don't need to write custom renderer for what you're looking for. The UI for Xamarin RadListView has support for multiple selection.

The popup UI is up to you on how you want to build it, the keyt takeaway is that the RadListView has a SelectedItems property that you can bind to. The demo in link I shared above shows you how to do this.

As an example of how to show that list selector is you can just have the RadListView on the page and toggle the IsVisible property when the user clicks the button.

Here's small demo that does that, I show or hide the parent Grid of the "popup":

<ContentPage ...>
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid x:Name="Selector" IsVisible="False">
          <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
          </Grid.RowDefinitions>

          <Label Text="Select Items" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontAttributes="Bold"/>

          <dataControls:RadListView x:Name="radListView"
                                    SelectionMode="Multiple"
                                    SelectionChanged="RadListView_OnSelectionChanged"
                                    Grid.Row="1"/>
        </Grid>

        <ScrollView Grid.Row="1">
          <Label x:Name="OutputLabel" Margin="10,10,10,0"/>
        </ScrollView>

        <Button x:Name="myButton"
                Text="Open Selector"
                Clicked="Button_OnClicked"
                Grid.Row="2"/>

    </Grid>
</ContentPage>

namespace MultiSelectListViewDemo.Portable
{
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            InitializeComponent();

            radListView.ItemsSource = Enumerable.Range(1, 10).Select(i => $"Item {i}").ToList();
        }

        private void Button_OnClicked(object sender, EventArgs e)
        {
            Selector.IsVisible = !Selector.IsVisible;
            myButton.Text = Selector.IsVisible ? "Close Selector" : "Open Selector";
        }

        private void RadListView_OnSelectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.NewItems != null)
            {
                foreach (var item in e.NewItems)
                {
                    OutputLabel.Text += $"\r\n{item} added to selection(s)";
                }
            }

            if (e.OldItems != null)
            {
                foreach (var item in e.OldItems)
                {
                    OutputLabel.Text += $"\r\n{item} removed from selection(s)";
                }
            }
        }
    }
}

You can try this at runtime in the attached demo.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik