set listview row height to fit to content

[RR]

Is there a way to set radlistview row height to fit to the content. Here how I set the radListview. 

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding Source={StaticResource Labels}, Path=Obj}">
          <telerikDataControls:RadListView.ItemTemplate>
              <DataTemplate>
                  <telerikListView:ListViewTemplateCell>
                      <telerikListView:ListViewTemplateCell.View>
                          <StackLayout>
                              <template:AppointmentListItemTemplate/>
                          </StackLayout>
                      </telerikListView:ListViewTemplateCell.View>
                  </telerikListView:ListViewTemplateCell>
              </DataTemplate>
          </telerikDataControls:RadListView.ItemTemplate>
 </telerikDataControls:RadListView>

[Lance | Manager Technical Support]

Hello Roshan,

Try setting the ItemLength of the ListViewLinearLayout:

<telerikDataControls:RadListView>
    <telerikDataControls:RadListView.LayoutDefinition>
        <telerikListView:ListViewLinearLayout ItemLength="70" />
    </telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>

If you still have trouble with this, open a support ticket here and attach your code so that we can reproduce and investigate further.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Nidhi]

Hi Lance,

I also want such functionality where the listview cell grows according to its content, which means the list can have unequal cell height. But according to the above example you gave, setting item length to static value will fix it's height for all cells. How can we achieve the auto grow feature in RadListView, is there any property like HasUnevenRows that we have in native ListView in Xamarin.Forms.

Thanks & Regards

Nidhi Sood

[Lance | Manager Technical Support]

Hi Nidhi,

There is no need for such a property with the RadListView, it will render the cell's content height.  For example, if some of the items are 100px high and others are 75px high, it will render the cells accordingly. The one thing to be aware of is that if the contents do not responsibly manage the height (i.e. stretch to infinity), it could get clipped or stretch out. 

If you're having trouble with this, it's likely a scenario-specific implementation problem that we'll need to investigate directly. Please open a support ticket and share all of the code that is used for the RadListView.

Specifically, we would will need the following to investigate directly:

- The page where the RadListView is (it's important that we see the rest of the page, not just the RadListView's XAML).
- The DataTemplate or TemplateSelector being used for the ItemTemplate.
- The data model class for the items (so that we can populate the ItemsSource).
- A few examples of the data items (it doesn't have to be the actual real data, just as long as it represents what the real data would be like).

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Lance | Manager Technical Support]

Hello Nidhi,

Here's an example you can use to verify my last reply.

Runtime Screenshot (notice variable cell height depending on value of IsFavorite):



XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NidhiDynamicCellHeightDemo.Portable"
             xmlns:dataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:listView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="NidhiDynamicCellHeightDemo.Portable.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>

    <Grid>
        <dataControls:RadListView x:Name="listView"
                                  ItemsSource="{Binding Source}">
            <dataControls:RadListView.ItemTemplate>
                <DataTemplate>
                    <listView:ListViewTemplateCell>
                        <primitives:RadBorder BorderColor="DarkSlateBlue"
                                              BorderThickness="2"
                                              BackgroundColor="Lavender">
                            <StackLayout Margin="10,5,10,5">
                                <Label Text="{Binding Title}"
                                       FontSize="16"
                                       FontAttributes="Bold"
                                       TextColor="Black"
                                       VerticalOptions="Center" />

                                <Label Text="{Binding Author, StringFormat='by {0}'}"
                                       FontAttributes="Italic" />

                                <!-- This will be visible for some items, making the cell larger than the others. -->
                                <primitives:RadBorder IsVisible="{Binding IsFavorite}"
                                                      BackgroundColor="DarkSlateBlue"
                                                      Padding="5"
                                                      HorizontalOptions="Fill">
                                    <Label Text="favorite"
                                           TextColor="White"
                                           HorizontalTextAlignment="Center"
                                           VerticalTextAlignment="Center" />
                                </primitives:RadBorder>
                            </StackLayout>
                        </primitives:RadBorder>
                    </listView:ListViewTemplateCell>
                </DataTemplate>
            </dataControls:RadListView.ItemTemplate>
        </dataControls:RadListView>
    </Grid>
</ContentPage>

C#

using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace NidhiDynamicCellHeightDemo.Portable
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class Book
    {
        public string Title { get; set; }
        public string Author { get; set; }
        public bool IsFavorite { get; set; }
    }

    public class ViewModel
    {
        public ObservableCollection<Book> Source { get; set; } = new ObservableCollection<Book>{
            new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
            new Book{ Title = "Divergent",  Author = "Veronica Roth", IsFavorite = true},
            new Book{ Title = "Gone Girl",  Author = "Gillian Flynn", IsFavorite = true},
            new Book{ Title = "Clockwork Angel",  Author = "Cassandra Clare"},
            new Book{ Title = "The Martian",  Author = "Andy Weir", IsFavorite = true},
            new Book{ Title = "Ready Player One",  Author = "Ernest Cline"},
            new Book{ Title = "The Lost Hero",  Author = "Rick Riordan", IsFavorite = true},
            new Book{ Title = "All the Light We Cannot See",  Author = "Anthony Doerr"},
            new Book{ Title = "Cinder",  Author = "Marissa Meyer"},
            new Book{ Title = "Me Before You",  Author = "Jojo Moyes"},
            new Book{ Title = "The Night Circus",  Author = "Erin Morgenstern"},
        };
    }
}

As I mentioned before, if you have trouble please open a ticket or start a new thread (the original question Roshan asked was how to set an explicit height).

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Nidhi]

Hi Lance,

Thank you for your continuous and efficient support. I really appreciate that!

I have asked my client to provide me access to the Licensed account and will get it soon. Until then, I'm unable to open a separate support ticket to share my code. If you can create one for me then I can show you my code and you can have a better idea of the problem I'm facing.

Do let me know the best way possible to work together on this issue.

Thanks & Regards

Nidhi Sood

 

 

[Lance | Manager Technical Support]

Hello Nidhi,

Unfortunately, since you do not have have support license, I unable to create a support ticket for you either. Once you are assigned as the Licensed User by your client, you'll be able to open tickets (on Support Tickets page) and attach ZIP files.

In the meantime, you could open a new Forum Thread about this new question(s) and share a link that we can download the project (e.g. put it OneDrive, DropBox, etc).

Important! If you do open a new thread and share a link, please make sure you delete all of the bin and obj folders from every project before you ZIP it up. This is so that you do not accidentally redistribute the paid version of UI for Xamarin assemblies to the general public.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik