Expandable Listview Cells

[john]

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?

 

 

[Lance | Manager Technical Support]

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 2^nd row has a height of Auto:

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition Height="Auto"/>

    </Grid.RowDefinitions>

 

</Grid>

In the 2^nd 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 2^nd 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