locked
Set the scroll position in WinJS.UI.ListView in metro app HTML5 Javascript

    Question

  • I am trying to set the scroll position using ensureVisible in my WinJS.UI.ListView as below code

    var calListView = id("calendarListView").winControl;
    calListView.loadingBehavior = "randomaccess";
    calListView.itemDataSource = calendarData.dataSource;
    calListView.itemTemplate = id("calendarGallery");
    calListView.ensureVisible(4);
    calListView.forceLayout();

    This code doesn't work when the page is loaded for the first time. If I do calListView.ensureVisible(4) from the click event of a button once the listview is loaded it works and scroll position moves. Seems like ensureVisible works only after the items are loaded into the liview.I tried ScrollTo method which didn't help too.

    Is there a way to set the scroll position of listview when the page is loaded. I couldn't find a page_loaded event or some event where I can hook in this code to get it work. I am using javascript to develop this metro app. I am  using WinJS.Navigation.navigate to get to this page.

    Selecting an item in Listview is working using ListView.selection.set method. Setting Scroll position does not.

    Any pointers helps!


    MCSD

    Thursday, May 3, 2012 11:19 PM

Answers

  • Hey Thambu,

    I think I was able to reproduce the issue.  After you call WinJS.processAll(); call this:

                msSetImmediate(function (){ id("calendarListView").winControl.ensureVisible(4); } );


    Jeff Sanders (MSFT)

    Monday, May 7, 2012 5:45 PM
    Moderator
  • Thanks Jeff, putting  msSetImmediate(function (){ id("calendarListView").winControl.ensureVisible(4);} ); works

    MCSD

    • Marked as answer by Thambu Tuesday, May 8, 2012 12:55 AM
    Tuesday, May 8, 2012 12:55 AM

All replies

  • Hi Thambu,

    Have you tried scrolling after the loadingstatechanged event?

    http://msdn.microsoft.com/en-us/library/windows/apps/hh700709.aspx

    In the documentation says that it's fired when a listview goes from loading state to ready state.


    Ricardo Sabino --- http://www.ricardosabino.com


    • Edited by n0n4m3 Friday, May 4, 2012 2:16 AM
    Friday, May 4, 2012 2:15 AM
  • Hi Ricardo,

    Thanks for your response, I tried loadingstatechanged event the problem with that is, it get fried every time a list view is being scrolled. Also the first time the listview gets loaded the event gets fired many times. Putting something like ensureVisible in that event gets the event fired recursively.

    Thanks,

    Thambu


    MCSD

    Friday, May 4, 2012 9:59 PM
  • You said: "This code doesn't work when the page is loaded for the first time. If "

    Where are you using this code?  A concrete example or repro would be very helpful.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, May 7, 2012 5:25 PM
    Moderator
  • Hey Thambu,

    I think I was able to reproduce the issue.  After you call WinJS.processAll(); call this:

                msSetImmediate(function (){ id("calendarListView").winControl.ensureVisible(4); } );


    Jeff Sanders (MSFT)

    Monday, May 7, 2012 5:45 PM
    Moderator
  • Thanks Jeff, putting  msSetImmediate(function (){ id("calendarListView").winControl.ensureVisible(4);} ); works

    MCSD

    • Marked as answer by Thambu Tuesday, May 8, 2012 12:55 AM
    Tuesday, May 8, 2012 12:55 AM
  • I'd just like to confirm that I used to have that issue as well, and now it's solved with this trick.

    In my case, I was trying to ensure an item was visible during the ready method for the page containing the listView.

    Using listView.indexOfFirstVisible kinda-worked, but the listView moved even when not needed. 

    listView.ensureVisible was not working at all.

    Instead this worked like a charm:

    msSetImmediate(function () {
        listView.ensureVisible(data.selectedIndex);
    });

    Friday, June 1, 2012 7:34 PM