Expandable Listview Cells

2 posts, 0 answers
  1. john
    john avatar
    4 posts
    Member since:
    Jan 2017

    Posted 28 Aug Link to this post

    I am currently trying to implement a radlistview which will expand the cell to show more data.

    Currently it seems my only option is to refresh the entire list view in order to show the hidden fields.

    Is there any way for me to avoid this?

     

     

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    415 posts

    Posted 29 Aug Link to this post

    Hello John,

    This can be accomplished by binding the Visibility of a UI element in TemplateCell to a boolean of the object model. Here's an explanation of my demo (attached):


    1 – Use a ListViewTemplateCell for the item

    In my demo, I use a Grid with two rows, the 2nd row has a height of Auto:

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

     

    </Grid>

    In the 2nd row is where we’ll put content that will be hidden/shown.

    2 – Bind a model property to the visibility of a UI element

    For this, I bound my item model’s “ShowDetails” property…

    private bool showDetails;

    public bool ShowDetails

    {

        get { return showDetails; }

        set { showDetails = value; OnPropertyChanged(); }

    }

    … to the IsVisble property of a StackLayout control that is in the 2nd row of the Grid in the template:

    <StackLayout IsVisible="{Binding ShowDetails}" >

     

    3 – Hook into ListView’s ItemTapped event

    Inside the event handler you can get the tapped item and then toggle the property responsible for showing or hiding the UI element in the template.

    For example, in my demo I use:

    <telerikDataControls:RadListView ItemTapped="ListView_OnItemTapped" ...>

     

    private void ListView_OnItemTapped(object sender, ItemTapEventArgs e)

    {

        var book = e.Item as BookItemViewModel;

        if (book == null) return;

     

        book.ShowDetails = !book.ShowDetails;

    }



    If you have any implementaiton specific questions or run into an issue, you can open a support ticket here (you have access to support during your trial) and share your project with the engineering team for further assistance.


    Regards,
    Lance | Tech Support Engineer, Sr.
    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