Dynamic Cell heights on IOS

21 posts, 0 answers
  1. Christopher
    Christopher avatar
    7 posts
    Member since:
    Sep 2014

    Posted 24 Sep 2015 Link to this post

    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?

  2. Tsvyatko
    Admin
    Tsvyatko avatar
    863 posts

    Posted 29 Sep 2015 Link to this post

    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
    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
  3. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 08 Oct 2015 in reply to Tsvyatko Link to this post

    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>


     
     
  4. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 08 Oct 2015 in reply to Erik Link to this post

    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>

  5. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 12 Oct 2015 Link to this post

    Hi Erik,

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

    Best regards,
    Ves
    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
  6. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 21 Oct 2015 Link to this post

    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

     
     
  7. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 26 Oct 2015 Link to this post

    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
    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
  8. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 26 Oct 2015 in reply to Ves Link to this post

    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

  9. Christopher
    Christopher avatar
    7 posts
    Member since:
    Sep 2014

    Posted 26 Oct 2015 in reply to Ves Link to this post

    Hey Ves,

    Could I also get the fix?

  10. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 27 Oct 2015 Link to this post

    Hi Christopher,

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

    Best regards,
    Ves
    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
  11. Benjamin
    Benjamin avatar
    7 posts
    Member since:
    Feb 2013

    Posted 11 Oct 2016 in reply to Ves Link to this post

    still not fixed ?
  12. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 14 Oct 2016 Link to this post

    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
    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
  13. Benjamin
    Benjamin avatar
    7 posts
    Member since:
    Feb 2013

    Posted 14 Oct 2016 in reply to Ves Link to this post

    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.
  14. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 19 Oct 2016 Link to this post

    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
    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
  15. Ian
    Ian avatar
    68 posts
    Member since:
    Jul 2017

    Posted 08 Sep 2018 Link to this post

    Has this been fixed or do rows still need their height set manually?
  16. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 12 Sep 2018 Link to this post

    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
    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
  17. Ian
    Ian avatar
    68 posts
    Member since:
    Jul 2017

    Posted 12 Sep 2018 in reply to Stefan Nenchev Link to this post

    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.
  18. Didi
    Admin
    Didi avatar
    306 posts

    Posted 13 Sep 2018 Link to this post

    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
    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
  19. Ian
    Ian avatar
    68 posts
    Member since:
    Jul 2017

    Posted 17 Sep 2018 in reply to Didi Link to this post

    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.

  20. Ian
    Ian avatar
    68 posts
    Member since:
    Jul 2017

    Posted 17 Sep 2018 in reply to Ian Link to this post

    Oh, Stackview doesn't expand horizontally so I used one grid instead. Nesting grids seems to confuse the height calculation.
  21. Didi
    Admin
    Didi avatar
    306 posts

    Posted 18 Sep 2018 Link to this post

    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
    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