expander for list view item

[RR]

hi 

I want to show some additional information on list view items. But those has to be hidden and showed in user interaction. Is there way to add a expander sort of behavior to list view item. Or do u have any other suggestion to solve this?

 

Thank you in advance.

 

[Lance | Manager Technical Support]

Hi Roshan,

You can bind the visibility of the "expanded" section of your ListViewTemplateCell to a property on the bound model. Then, by toggling the value of that bool, the area will be appear to expand.

Here's a simple example:

<telerikDataControls:RadListView x:Name="listView"
                     ItemsSource="{Binding Source}"
                     SelectionMode="None"
                     ItemTapped="ListView_OnItemTapped">

    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <listView:ListViewTemplateCell>
                <listView:ListViewTemplateCell.View>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <StackLayout Orientation="Horizontal" Margin="10, 10, 10, 0">

                           <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center" />
                        </StackLayout>
                        <StackLayout IsVisible="{Binding ShowDetails}" Orientation="Horizontal" Grid.Row="1" Margin="10, 0, 10, 10">
                           <Label Text="by" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                           <Label Text="{Binding Author}" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                        </StackLayout>
                    </Grid>
                </listView:ListViewTemplateCell.View>
            </listView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

Then in the ListView_OnItemTapped event handler, toggle the ShowDetails value:

private void ListView_OnItemTapped(object sender, ItemTapEventArgs e)
{
    if (e.Item is BookItemViewModel book)
    {
        book.ShowDetails = !book.ShowDetails;
    }
}

Just make sure you're model has PropertyChanged wired up, or the binding won't be notified of the changed value:

public class BookItemViewModel : NotifyPropertyChangedBase
{
    ...

    private bool showDetails;
    public bool ShowDetails
    {
        get { return showDetails; }
        set { showDetails = value; OnPropertyChanged(); }
    }
}

If you have any implementation-specific rpoblems, you can open a support ticket here and attach your project so we can investigate directly.

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

[RR]

Thankx. This is working. But the list is not updating instantly. But it is updating only the items are reappear after scrolling. Any ideas on that?

 

Thank you

[Lance | Manager Technical Support]

Hello Roshan,

This sounds like you do not have PropertyChanged wired up for your boolean property.

private bool myIsExpandedProperty;
public bool MyIsExpandedProperty
{
    get { return myIsExpandedProperty; }
    set { myIsExpandedProperty= value; OnPropertyChanged(); }
}

To confirm this, add a Label to the template and bind it to the value. If you don't see the text update, then something is wrong with your OnPropertyChanged method.

<Label Text="{Binding MyIsExpandedProperty}" />

The reason you see it properly after the scrolling is because the container was recycled, so when it get scrolled back it has to get the value of the property again when creating the container.

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