expander for list view item

4 posts, 1 answers
  1. RR
    RR avatar
    49 posts
    Member since:
    Apr 2012

    Posted 21 Nov 2017 Link to this post

    hi 

    I want to show some additional information on list view items. But those has to be hidden and showed in user interaction. Is there way to add a expander sort of behavior to list view item. Or do u have any other suggestion to solve this?

     

    Thank you in advance.

     

  2.
  3. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 21 Nov 2017 Link to this post

    Hi Roshan,

    You can bind the visibility of the "expanded" section of your ListViewTemplateCell to a property on the bound model. Then, by toggling the value of that bool, the area will be appear to expand.

    Here's a simple example:

    <telerikDataControls:RadListView x:Name="listView"
                         ItemsSource="{Binding Source}"
                         SelectionMode="None"
                         ItemTapped="ListView_OnItemTapped">
        
        <telerikDataControls:RadListView.ItemTemplate>
            <DataTemplate>
                <listView:ListViewTemplateCell>
                    <listView:ListViewTemplateCell.View>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
     
                            <StackLayout Orientation="Horizontal" Margin="10, 10, 10, 0">
     
                               <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center" />
                            </StackLayout>
                            <StackLayout IsVisible="{Binding ShowDetails}" Orientation="Horizontal" Grid.Row="1" Margin="10, 0, 10, 10">
                               <Label Text="by" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                               <Label Text="{Binding Author}" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                            </StackLayout>
                        </Grid>
                    </listView:ListViewTemplateCell.View>
                </listView:ListViewTemplateCell>
            </DataTemplate>
        </telerikDataControls:RadListView.ItemTemplate>
    </telerikDataControls:RadListView>


    Then in the ListView_OnItemTapped event handler, toggle the ShowDetails value:

    private void ListView_OnItemTapped(object sender, ItemTapEventArgs e)
    {
        if (e.Item is BookItemViewModel book)
        {
            book.ShowDetails = !book.ShowDetails;
        }
    }


    Just make sure you're model has PropertyChanged wired up, or the binding won't be notified of the changed value:

    public class BookItemViewModel : NotifyPropertyChangedBase
    {
        ...
     
        private bool showDetails;
        public bool ShowDetails
        {
            get { return showDetails; }
            set { showDetails = value; OnPropertyChanged(); }
        }
    }


    If you have any implementation-specific rpoblems, you can open a support ticket here and attach your project so we can investigate directly.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. RR
    RR avatar
    49 posts
    Member since:
    Apr 2012

    Posted 22 Nov 2017 Link to this post

    Thankx. This is working. But the list is not updating instantly. But it is updating only the items are reappear after scrolling. Any ideas on that?

     

    Thank you

  7. Answer
    Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 22 Nov 2017 Link to this post

    Hello Roshan,

    This sounds like you do not have PropertyChanged wired up for your boolean property.

    private bool myIsExpandedProperty;
    public bool MyIsExpandedProperty
    {
        get { return myIsExpandedProperty; }
        set { myIsExpandedProperty= value; OnPropertyChanged(); }
    }


    To confirm this, add a Label to the template and bind it to the value. If you don't see the text update, then something is wrong with your OnPropertyChanged method.

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


    The reason you see it properly after the scrolling is because the container was recycled, so when it get scrolled back it has to get the value of the property again when creating the container.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top