Accordion UX with RadListView: prevent scrolling to top when calling resumeUpdates() or refresh()

[Tony]

Hello all,

I'm working with RadListView to try to make an accordion like UI i.e. you click a parent item, it will expand and show x number of children items.

I got the visibility logic working just fine, but it appears that the UI does not refresh until you scroll away from the expanded/collapsed items. I have attached screenshots to illustrate what I mean: the height does not change upon expanding/collapsing. When you scroll away and come back, the UI has updated it. This isn't ideal, but at least implies this is just a side effect of how the RadSideList renders UI updates.

I found a workaround that ALMOST does exactly what I need. I have an onItemSelectedEvent listener method that looks like this:

---

let listView: RadListView = args.object;
let exp = _.first(listView.getSelectedItems());

listView.deselectAll();

exp.show_segments = !exp.show_segments;
exp.segments.forEach((seg) => seg.visible = !seg.visible);

listView.refresh();

---

It works like a charm and updates the UI on the spot. The only problem I now face is that it scrolls all the way back up to the top of the list, which is obviously a bit frustrating from a UX perspective if you're expanding/collapsing stuff further down the list. I have also tried using suspendUpdates/resumeUpdates, and I get the same result.

Does anyone know of any way to prevent this scrolling from happening? Is there a different method I should be taking in order to implement an accordion type UI to use with RadListView?

Thanks in advance for your time and help.

 

[Tony]

"this is just a side effect of how the RadSideList renders UI updates."

I meant RadListView there, my bad!

[Tony]

One last thing of note that I just discovered: the UI update lag only appears to be happening on iOS. Android, the hide/collapse functionality updates immediately.

[Nick Iliev]

Hello Tony,

In order to prevent your listview to scroll to the initial position, you can create a logic which scrolls the list on the list loaded event using a cached index. An example of using a cached index with view-model and RadList can be found here. The shown example demonstrates how to handle and provide the item index with itemTap and loaded event. However, in your case, I guess the better approach will be to cache the index of the selected item.
You can do that using itemSelected event.
e.g.:

<lv:RadListView items="{{ dataItems }}" loaded="onListLoaded"
          itemSelected="onItemSelected" selectionBehavior="Press" multipleSelection="true">

and in your code behind file, you can grab the selected index via ListViewEventData

export function onItemSelected(args: RadListView.ListViewEventData) {

    console.log(args.itemIndex);
      myViewModel.set("cachedSelectedIndex", args.itemIndex);

}

and reuse it to reload your list to the desired index.

list.scrollToIndex(myViewModel.get("cachedSelectedIndex"));

I hope this example will be applicable for your case and please let us know if you need further assistance.

Regards,
Nikolay Iliev
Telerik by Progress