Dynamic Cell heights on IOS

[Christopher]

Hi There,

 I have ​implemented a Telerik Xamarin Forms Listview with custom cells. The group headers and cells have text in each that can grow and shrink depending on the amount of text in the record. This works perfectly on android but on IOS all the cells (Headers and Data Rows) are exactly the same height. Xamarin Forms Listview has a property called "HasUnevenRows" which takes care of this issue. Is there such a property in the Telerik Xamarin Forms Listview?

[Tsvyatko]

Hi Christopher,

Currently, only fixed height is supported through ListViewLayout.ItemLength property. Due to high demand of this feature it is scheduled for our next SP release scheduled for the beginning of November.

Regards,
Tsvyatko
Telerik

[Erik]

I have what I believe to be a similar issue that does occur on Android.  My ItemTemplate is included below.  When the label bound to "Property" has enough text, it wraps and prevents visibility on the content of the Description and CreatedAt labels.  Will the upcoming release address this as well?

 I have a solution posted on GitHub that can easily repro this issue -- it's here:

https://github.com/dahlsailrunner/TelerikSample

 

I was running the above on a 5" KitKat emulator. 

 

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<telerikListView:ListViewTemplateCell.View>

<StackLayout Orientation="Horizontal" Spacing="2" Padding="0,0,0,3">

<controls:CheckBox Checked="{Binding IsSelected, Mode=TwoWay}" BackgroundColor="#f2f2f2" TextColor="#448AFF"></controls:CheckBox>

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,10,0" Spacing="1">

<Label Text="{Binding Property, StringFormat='{0}'}" TextColor="Black" FontSize="16" VerticalOptions="Center"></Label>

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="1" Padding="15,0,0,0">

<Label Text="{Binding Description, StringFormat='{0}'}"

FontSize="14" TextColor="Black" HorizontalOptions="StartAndExpand" VerticalOptions="Center"></Label>

<Label Text="{Binding CreatedAt, StringFormat='{0}'}"

FontSize="14" TextColor="Black" HorizontalOptions="End" VerticalOptions="Center"></Label>

</StackLayout>

</StackLayout>

</StackLayout>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

​

 

 

[Erik]

wow sorry about the formatting.  Maybe this is better.

<DataTemplate>
                    <telerikListView:ListViewTemplateCell>
                        <telerikListView:ListViewTemplateCell.View>
                            <StackLayout Orientation="Horizontal" Spacing="2" Padding="0,0,0,3">
                                <controls:CheckBox Checked="{Binding IsSelected, Mode=TwoWay}" BackgroundColor="#f2f2f2" TextColor="#448AFF"></controls:CheckBox>
                                <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,10,0" Spacing="1">
                                    <Label Text="{Binding Property, StringFormat='{0}'}" TextColor="Black" FontSize="16" VerticalOptions="Center"></Label>
                                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="1" Padding="15,0,0,0">
                                        <Label Text="{Binding Description, StringFormat='{0}'}"
                                           FontSize="14" TextColor="Black" HorizontalOptions="StartAndExpand" VerticalOptions="Center"></Label>
                                        <Label Text="{Binding CreatedAt, StringFormat='{0}'}"
                                           FontSize="14" TextColor="Black" HorizontalOptions="End" VerticalOptions="Center"></Label>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </telerikListView:ListViewTemplateCell.View>
                    </telerikListView:ListViewTemplateCell>
                </DataTemplate>

[Ves]

Hi Erik,

Thanks for the details. The problem will be fixed with our next release, expected later this week.

Best regards,
Ves
Telerik

[Erik]

Hi - I'm wondering if I need to do anything with my XAML to fix this after the release.

In the RadListView above, my property name wraps -- the "Binding Property" Label -- which is good.  but now I can't see the other two data elements because they are below the row.

 

Here is a link to the GitHub repo which shows this in action (it's been updated with the Oct 15 2015 release):

https://github.com/dahlsailrunner/TelerikSample

The first main row in the RadListView only shows a wrapped name, and is missing the second row of two Labels. 

 

I have a second project which contains a RadListView within another RadListView, and the sizing of the internal one does not vary when I have different numbers of items (seems to be a very similar if not the same problem). 

This is in the same repo, but a different branch. 

https://github.com/dahlsailrunner/TelerikSample/tree/ListViewNestIssue

In this project, I create a list of "Services" each of which have a list of "Bills".  There are 3 Services, and they have 1, 1, and 2 Bills in them and I am showing this as a RadListView of Services, which contains a RadListView for the Bills in its item template.  If you run the project, the Service item with two bills actually only displays 1, because the height of the interior RadListView is not tall enough for that item.

 

I *think* both of these point to the same type of problem -- the height of the row in the listview does not seem to grow when it needs to -- I may have some XAML that is incorrect or there may still be a bug or two to work out.

Can you let me know what you find?

Thanks -

Erik

 

 

[Ves]

Hi Erik,

You are not expected to do anything about it. But your question actually made us revisit the issue and I am afraid, the fix is not complete. Please, accept our apologies for this. You can open a formal support ticket, so that we can provide you with a custom build.

Best regards,
Ves
Telerik

[Erik]

Thanks for the reply, Ves.  I have submitted a support request as you ask and will look forward to the custom build which fixes this issue.  I appreciate your help!

Cheers -

Erik

[Christopher]

Hey Ves,

Could I also get the fix?

[Ves]

Hi Christopher,

Please, open a formal support ticket, so I can attach a dev build.

Best regards,
Ves
Telerik

[Benjamin]

still not fixed ?

[Ves]

Hi Benjamin,

This thread is rather old now. We have introduced a number of improvements in the control. Can you please start a new thread (support or forum) and provide specific details about the issues you encounter. Thank you.

Best regards,
Ves
Telerik by Progress

[Benjamin]

Yeah i know, but i've used your control and it does not feature dynamic cell height on ios 10 simulator. It is the only thread speaking of this so ... And Xamarin's ListView does not have this feature too, you can only specify a different cell height for each item separatly.

[Ves]

Hi Benjamin,

Please, find attached a small example, depicting different items heights in iOS 10. Please, give it a try and let us know if it fits your needs.

Best regards,
Ves
Telerik by Progress

[Ian]

Has this been fixed or do rows still need their height set manually?

[Stefan Nenchev]

Hi Ian,

The RadListView control supports variable size for its items. The cell height is set dynamically based on the content of each cell. Regarding this, please take a look at the attached image how the RadListView cells are displayed on iOS.

Let me know if you have any other questions or concerns. 

Regards,
Stefan Nenchev
Progress Telerik

[Ian]

Is there a setting required because I have two text fields in an item template and on iOS they're spilling out the bottom of the row. This doesn't happen on Android.

[Didi]

Hi Ian,

I have created a sample project with two Labels using RadListView.ItemTemplate and I couldn't reproduce the described scenario. Could you give us more details on the exact scenario with the ListView.ItemTemplate you have? Can you post some sample code, so we could see how the ListView is defined?

Please take a look at the attached project how the ListView is defined in XAML and also note that the Telerik UI for Xamarin suite (v 2018.3.912.1) is added to the sample through Telerik NuGet Server.

Looking forward to your reply.

Regards,
Didi
Progress Telerik

[Ian]

I was using XML from a Telerik calendar demo - the one with the thin coloured bar on the left with two times stacked vertically on the right and two rows of text fields stacked vertically in the center.

It has a grid containing a grid for the coloured bar and a grid for the text.

I replaced the outermost grid with a StackView and replaced the left coloured bar with a BoxView and now it's working.

[Ian]

Oh, Stackview doesn't expand horizontally so I used one grid instead. Nesting grids seems to confuse the height calculation.

[Didi]

Hi Ian,

Thank you for the detailed explanation.

I noticed you've already resolved the issue in the other thread where it is discussed: https://www.telerik.com/forums/minimum-row-height.

Let me know if you have any other questions.

Regards,
Didi
Progress Telerik