This is a migrated thread and some comments may be shown as answers.

expander for list view item

3 Answers 58 Views
This is a migrated thread and some comments may be shown as answers.
RR
Top achievements
Rank 1
RR asked on 21 Nov 2017, 08:11 AM

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.

 

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 21 Nov 2017, 03:51 PM
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
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
0
RR
Top achievements
Rank 1
answered on 22 Nov 2017, 08:44 AM

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

0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 22 Nov 2017, 06:37 PM
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
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
Asked by
RR
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
RR
Top achievements
Rank 1
Share this question
or