Different Cell Types in same ListView

5 posts, 1 answers
  1. Ron
    Ron avatar
    25 posts
    Member since:
    Jan 2017

    Posted 27 Apr 2017 Link to this post

    In the Xamarin Forms ListView you can have different types of cells in the same ListView. Is it possible to do that with RadListView, and if so, how?
  2. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 27 Apr 2017 Link to this post

    Hi Ron,

    For this type of scenario we have the ListViewTemplateCell, in which you can setup the cell's View to your liking. If you need to dynamically set the content according to the bound item's values, you can use ValueConverters.

    Alternatively, you can create a custom cell by extending the ListViewTemplateCell:

    public class MyCustomCell : ListViewTemplateCell
    {
        private Image icon;
        private Label titleLable;
        private Label authorLabel;
     
        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();
     
            EnsureUiElements();
     
            var data = BindingContext as NewsItem;
     
            if (data == null) return;
     
            icon.IsVisible = true;
                     
            titleLable.IsVisible = true;
            titleLable.Text = data.title;
     
            authorLabel.IsVisible = true;
            authorLabel.Text = data.author_name;
        }
             
        private void EnsureUiElements()
        {
            if (icon == null)
                icon = View.FindByName<Image>("icon");
     
            if (titleLable == null)
                titleLable = View.FindByName<Label>("title");
     
            if (authorLabel == null)
                authorLabel = View.FindByName<Label>("author");
        }
    }


    Then in the XAML, you use the custom cell as your RadListView ItemTemplate

    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <layouts:MyCustomCell>
               <layouts:MyCustomCell.View>
                  <Grid Margin="6">
                      <!-- Design as you see fit -->
                      <StackLayout>
                         <Image x:Name="icon" />
                         <Label x:Name="title" />
                         <Label x:Name="author" />
                      </StackLayout>
                   </Grid>
                </layouts:MyCustomCell.View>
            </layouts:MyCustomCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>


    With both approaches you can hide or show individual elements according to what your bound model needs. Depending on what you want to do with your bound model, the custom cell may be an option that easier to determine what UIElements to show or hide (i.e. less Valueconverter code).

    Regards,
    Lance | Tech Support Engineer, Sr.
    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
  3. Ron
    Ron avatar
    25 posts
    Member since:
    Jan 2017

    Posted 09 May 2017 in reply to Lance | Manager Technical Support Link to this post

    Hi Lance,

    I understand that you can use a custom cell, which is great. However, my question is: can you have more than one custom cell type in a single RadListView? This is possible with the built in Xamarin Forms ListView through the use of a selector.

    I especially want this because I would like to be able to setup different cell/row heights. I have a scenario where I must set the height of the overall RadListView to the exact height of the contents. The only way that can be achieved is by knowing the height for each row and multiplying that by the number of rows. I need to have cells with different heights, though. That's the reason I'm asking about this.

    Thanks,

    Ron

  4. Answer
    Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 09 May 2017 Link to this post

    Hello Ron,

    I do understand what you're trying to achieve, unfortunately the RadListView currently doesn't have a ItemTemplateSelector property.

    To achieve your goal, you could try exposing a root Grid in your cell and set it's height dynamically. Keep track of the total height via a helper class or a singleton. Then, when you're done adding all the heights (and any padding, row spacing, etc), you can set the RadListView's height.

    Regards,
    Lance | Tech Support Engineer, Sr.
    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
  5. Ron
    Ron avatar
    25 posts
    Member since:
    Jan 2017

    Posted 11 May 2017 in reply to Lance | Manager Technical Support Link to this post

    Thanks Lance, that gave me what I needed. I appreciate it!

    Ron

Back to Top