Expand element RadListView


#1

Hello, I’m trying to implement a listview that when an item is tapped, it expands to show more info and when tapped again it collapse. I use the visibility=collapsed to hide the element and when the user click on an item, I set it to visible. Nothing happen, and if I run listView.refresh(), it works but it refresh all the list view (it moves up to the first element). Is possible to achieve this without refreshing it?

This is my main.xml

<lv:RadListView items="{{ itemData }}"  itemTap="{{ onTap }}"  >
        <lv:RadListView.itemTemplate>
        <GridLayout columns="*, auto" rows="auto, auto" width="100%" >
            <Label text="{{tittle}}" class="item" row="0" col="0" />
            <Label id="{{ 'arrow' + index}}" row="0" col="1" class="fa icon" verticalAlignment="center" visibility="{{ services.length > 0 ? 'visible' : 'collapsed' }}" text="{{'fa-angle-down' | fonticon}}"/>
            <lv:RadListView row="1" colSpan="2" items="{{ services }}" visibility="{{ collapsed ? 'collapsed' : 'visible' }}">
                    <lv:RadListView.itemTemplate>
                        <StackLayout>
                            <Label text="{{name}}"></Label>                         
                        </StackLayout>
                    </lv:RadListView.itemTemplate>
                </lv:RadListView>
        </GridLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>

And this is my model:

this.itemData = [{
            title: "Fumetti",
            services: services,
            collapsed: true,
            index: 0
        }, ecc... ecc..]

when I tap the item, I set the collapsed variable to false or true depending on what it was before


#2

Toggling visibility will not relayout the item at least in iOS. You may try defining different templates for expanded and collapsed mode, so at least that particular cell can be re-rendered with new template when data is updated.


#3

I tried it on Android. If I use multiple templates does it refresh automatically? Because if I toggle visibility on any normal UI element, it works perfectly, but inside the RadListView no.


#4

I got a workaround for Android to update item template without refreshing RadListView.

I guess iOS must be something similar, invoking reloadItemsAtIndexPaths of TKListView, yet to try.


#5

You can try nativescript-accordion plugin


#6

But expanding RadListView is a requirement we often need which has most other features we often need in a ListView like swipe actions, multiple templates etc.,


#7

Here is working solution for iOS and Android.

As @multishiv19 mentioned, Accordion plugin is another option if you are not using the other features that are limited to RadListView.


How to update view of a cell inside RadLisView
#8

Thanks for the answer, but I resolved this following the sdk example on listview, using ObservableArray. Every time I update the name or some other property the changes are immediately without refreshing it


#9

Thats Cool.

FYI, the solution given above was to satisfy the situations where you want to relayout your cell without refreshing whole list view. Observable can change content of cell but as of now it doesn’t do the trick of relayout.


#10

@manojdcoder - your solution worked really well for me. Thanks


#11

Hi. I used your solution and it is only working for ios. Do you have any idea why? Thank you!


#12

You mean the playground example I posted, did you test my example it worked for me on both iOS and Android?


#13

I tested in my emulator because I don’t have an android … I got your code and tested with my ios emulator and android but it only worked in the ios emulator… I don’t know if I did something wrong.


#14

For some reason the template view is not changing… so when I click in the item it does not do anything…


#15

I tested it again on Moto G5 with Android 7.x, it worked as expected. Please test on real device, if it doesn’t work still share the device and OS version you tested it against.


#16

Hi. Thank you for checking this out. I just found out why. It seems that the new version of nativescript-list-view-ui is not supporting this very well. I went back to the 3.5.2 version and it is working.


#17

Could be, Playground still uses nativescript-ui-listview v3.5.1. I may check it later today to see what actually causes the issue here in v3.5.4.