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

4 posts, 0 answers
  1. Tony
    Tony avatar
    3 posts
    Member since:
    Nov 2016

    Posted 12 Nov 2016 Link to this post

    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.

     

  2. Tony
    Tony avatar
    3 posts
    Member since:
    Nov 2016

    Posted 12 Nov 2016 in reply to Tony Link to this post

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

    I meant RadListView there, my bad!

  3. Tony
    Tony avatar
    3 posts
    Member since:
    Nov 2016

    Posted 13 Nov 2016 Link to this post

    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.
  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    105 posts

    Posted 14 Nov 2016 Link to this post

    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
    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
Back to Top