Using Expander as Listview ItemTemplate

2 posts, 1 answers
  1. Sébastien
    Sébastien avatar
    13 posts
    Member since:
    Dec 2018

    Posted 26 Apr 2019 Link to this post

    Hello,

    I want a listeView, and when I click on an item, layout expands smoothy to show details. 

    So I decided to use RadExpander as ItemTemplate. But its not working very well. 

    1. When I click on an item, it doesnt expand. I have to refresh the layout to see the expand (I refresh with scroll/unscroll). And then I can see it expand/reduce.

    2.When I scroll/unscroll, its like if wrong data is displayed on cells. New text is superimposed with old text. 

     

    Code below to reproduce (testing on android device).

    I am open to any advice to achieve a smoothy expand on listview. 

    Thanks.

    [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class CurTestPage : ContentPage
        {
            public CurTestPage ()
            {
                InitializeComponent ();
     
                var list = new List<string>();
     
                for (int i = 0; i < 100; i++)
                {
                    list.Add(i.ToString());
                }
     
                listView.ItemsSource = list;
     
     
            }
             
        }
    <?xml version="1.0" encoding="utf-8" ?>
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
                 xmlns:abstractions="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
                 x:Class="Portwin.Tests.CurTestPage">
     
        <ListView x:Name="listView" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <telerikPrimitives:RadExpander x:Name="expander">
                            <telerikPrimitives:RadExpander.Header>
                                <telerikPrimitives:ExpanderHeader>
                                    <Label Text="{Binding .}" />
                                </telerikPrimitives:ExpanderHeader>
                            </telerikPrimitives:RadExpander.Header>
                            <telerikPrimitives:RadExpander.Content>
                                <Label Text="{Binding .}" />
                            </telerikPrimitives:RadExpander.Content>
                        </telerikPrimitives:RadExpander>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
     
    </ContentPage>
  2. Answer
    Yana
    Admin
    Yana avatar
    4995 posts

    Posted 01 May 2019 Link to this post

    Hello Sébastien,

    Actually this is a known issue with ListView and it could be observed with any control placed in the ItemTemplate if you try to increase its height dynamically - it just doesn't not expand to accommodate its content.

    I would suggest a different approach - to use RadListView with grouping instead.  RadListView provides expandable groups and you could group by unique property, so that each item is in its own group. Additionally, you could modify the GroupHeaderTemplate in order to achieve similar look as the Expander header.

    Please check the following resources for more details on grouping feature:
    ListView Grouping
    Expand and Collapse Groups

    I hope this would be helpful.

    Regards,
    Yana
    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