Expander as ListView ItemTemplate works on Android but not on iOS

[Paul Ridden]

Hi,

I am using a ListView and have set its ItemTemplate to be an Expander. This works fine on Android, expanding each of the items in the ListView moves the other items down, so that multiple items can be expanded at once.

However when the same is run on iOS, the Expander at the top of the list covers the rest of the Items in the ListView, therefore preventing multiple items to be expanded at the same time.

Is there some specific property I can set against a renderer for the iOS project to allow the behaviour, as experienced on Android, to be replicated on iOS?

Kind regards,

Paul

[Lance | Manager Technical Support]

Hello Paul,

I am not able to reproduce the behavior you're seeing. I've attached a demo you can use for reference to see it works as expected on iOS.

Here is a screenshot at runtime:

Here is the relevant code (take notice of the parent elements of the RadListView, RLV -> Grid -> Page, as this is an important concept I discuss in the next section of this reply):

<ContentPage >

    <Grid>
        <telerikDataControls:RadListView ItemsSource="{Binding Products}">
            <telerikDataControls:RadListView.ItemTemplate>
                <DataTemplate x:DataType="models:Product">
                    <telerikListView:ListViewTemplateCell>
                        <telerikPrimitives:RadExpander Margin="10">
                            <telerikPrimitives:RadExpander.Header>
                                <telerikPrimitives:ExpanderHeader>
                                    ....
                                </telerikPrimitives:ExpanderHeader>
                            </telerikPrimitives:RadExpander.Header>
                            <telerikPrimitives:RadExpander.Content>
                                ....
                            </telerikPrimitives:RadExpander.Content>
                        </telerikPrimitives:RadExpander>
                    </telerikListView:ListViewTemplateCell>
                </DataTemplate>
            </telerikDataControls:RadListView.ItemTemplate>
        </telerikDataControls:RadListView>
    </Grid>
</ContentPage>

Investigation Ideas

If I had to guess, I suspect you are using a parent element that does not support dynamic layout changes on iOS native elements (StackLayout is notoriously bad for this).

Here are some things for you to check:

1. You are using one of the invalid parent layout elements that break UI virtualization and layout, visit this article for explanation and solutions.
   • StackLayout
   • ScrollView
   • A Grid RowDefinition Height=Auto
2. You have a higher precedent item height set (in a LayoutDefinition ItemHeight or in the DataTemplate itself)

I suspect it is the 1st item, as this is a common mistake. Use my attached demo for recommended layout root.

 

Further Assistance

If you are still having problems after applying my suggestions, you open a Support Ticket and attach your code files/project, we can investigate directly and I can escalate to the development team if necessary. A forum post may take several days to reply to, while a Support Ticket has a guaranteed 24hr window.

Note that I do not see a UI for Xamarin license on your account, nor has it ever had a license. You will need to be assigned the license before you can open a ticket.

I suspect you are using your company's purchased license?  Have them assign you as the developer using the Manage Licensed Users page. It only takes 30 seconds to complete and lets you directly access Technical Support and all the features of the license provides.

1. Go to Managed Licensed Users
2. Click the blue "Add Developer" button and enter your email and details
3. Unassign the company from the license, then assign you.

They will always own the license and can change the developer at any time. This also avoids putting the company in an awkward situation by accidentally violating License Policy by redistributing product assemblies without without approval. 

If you need any help with this, I'm more than happy to assist.

Regards,
Lance | Manager - Technical Support
Progress Telerik

[Paul Ridden]

Hi Lance,

Thank you very much for your reply.

The issue seems to be my usage of the Xamarin.Forms.ListView to display the Expander controls. Having switched back over to use the RadListView, the Expander, Expander within Expander and Buttons are all working as expected. I originally was using the RadListView but ran into exceptions while using it so switched to use the Xamarin.Forms.ListView. Hopefully those exceptions with the RadListView are fixed in the latest release of the NuGet packages.

In regard to the license, we were using [e-mail] for the licence however this got moved over to [e-mail], rather than assigning the developer as you suggest, should I just post using the [e-mail] account in the future or can I continue posting under [e-mail]?

Kind regards,

Paul

[Lance | Manager Technical Support]

Hi Paul,

That's great news! Just as tip, it is a common mistake when switching between the vanilla ListView and RadListView to accidentally to leave in ViewCell (instead of using ListViewTemplateCell) at the base of the DataTemplate.

About the license, if you are the developer using the license, then yes, please ask Denise follow those steps and assign you to her DevCraft Complete license.

It literally takes 30 seconds to complete and gives your account full access to support and the product downloads (including the Telerik NuGet server). Denise can switch the license to another developer, or back to herself at any time, just as fast.

It is important that separate users do not use either others account to login because this presents a security problem for you. This is why we built the Manage Licensed Users system to be as painless and quick as possible :)

Note: You can have non-licensed Managers on the account, they can review tickets without you needing to CC a bunch of people on every ticket.

Regards,
Lance | Manager - Technical Support
Progress Telerik