locked
Return to previous location in grid after hitting back button

    Question

  • How do I stop my app from returning to the beginning of the grid view after pressing the back button? I remember the Windows store app having this problem in the earlier versions.

    Sunday, December 16, 2012 3:20 PM

Answers


  • Hi jflintstone81,

    Is the "Grid view" you mentioned the WinJS.UI.ListView control? And do you want to make the ListView remain select the same item before you navigate from its page (to an item details page) and after navigate back to it (from the item details page)?

    If this is the case, you might need to store the current selected index in the ListView in some in-memory variable so that you can keep updating it when selected index changes in ListView and when you leave and come back the ListView page. Then, whenever you come back to the ListView page (and repopulate the Listview through the same dataSource ), you can try calling the "set" method against ListView.selection property to assign the selected index:


    #ListView.selection property (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br211852.aspx


    and use ListView.ensureVisible to make the ListView scroll and display the certain item (by index):


    #ListView.ensureVisible method (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br211820


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by jflintstone81 Thursday, December 20, 2012 12:39 PM
    Tuesday, December 18, 2012 6:52 AM
    Moderator
  • This was a little tricky, but I eventually got it working in my app.

    First, here is the code to get the index of the last visible item in the list:

    function saveCurrentState()
    {
     var listViewElement = document.querySelector(".groupeditemslist");
            if (listViewElement) {
                var listView = listViewElement.winControl;
                WinJS.Application.sessionState.mainPageScrollPosition = listView.indexOfLastVisible;
            }
    }

    Call this function in 2 places:

    1) When the user navigates to another page by selecting an item in the list

    2) on 'checkpoint'

      WinJS.Application.addEventListener("checkpoint", function () {
            saveCurrentState();
        });

    Next, use this function to read the saved state and set the position of the list:

    function loadPreviousState() {
    
            setImmediate(function () {
                var listView = document.querySelector(".groupeditemslist").winControl;
                var scrollPosition =  WinJS.Application.sessionState.mainPageScrollPosition;
                if (scrollPosition) {
                    listView.ensureVisible(scrollPosition);
                }
            });
        }

    In the ready function for your list page, call the loadPreviousState method after all your other initialization logic.

    Hope this works for you!

     

     


    Dave Paquette @Dave_Paquette www.davepaquette.com


    Wednesday, December 19, 2012 3:09 PM

All replies


  • Hi jflintstone81,

    Is the "Grid view" you mentioned the WinJS.UI.ListView control? And do you want to make the ListView remain select the same item before you navigate from its page (to an item details page) and after navigate back to it (from the item details page)?

    If this is the case, you might need to store the current selected index in the ListView in some in-memory variable so that you can keep updating it when selected index changes in ListView and when you leave and come back the ListView page. Then, whenever you come back to the ListView page (and repopulate the Listview through the same dataSource ), you can try calling the "set" method against ListView.selection property to assign the selected index:


    #ListView.selection property (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br211852.aspx


    and use ListView.ensureVisible to make the ListView scroll and display the certain item (by index):


    #ListView.ensureVisible method (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br211820


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by jflintstone81 Thursday, December 20, 2012 12:39 PM
    Tuesday, December 18, 2012 6:52 AM
    Moderator
  • Yes, I am looking to store the current position on the grouped Items page before navigating to the item Details page with the ability to return to that position.

    I follow the logic of the coding, but I didn't quite follow the resource links you suggested; they seem to be variables with nothing being executed.

    Tuesday, December 18, 2012 1:45 PM
  • This was a little tricky, but I eventually got it working in my app.

    First, here is the code to get the index of the last visible item in the list:

    function saveCurrentState()
    {
     var listViewElement = document.querySelector(".groupeditemslist");
            if (listViewElement) {
                var listView = listViewElement.winControl;
                WinJS.Application.sessionState.mainPageScrollPosition = listView.indexOfLastVisible;
            }
    }

    Call this function in 2 places:

    1) When the user navigates to another page by selecting an item in the list

    2) on 'checkpoint'

      WinJS.Application.addEventListener("checkpoint", function () {
            saveCurrentState();
        });

    Next, use this function to read the saved state and set the position of the list:

    function loadPreviousState() {
    
            setImmediate(function () {
                var listView = document.querySelector(".groupeditemslist").winControl;
                var scrollPosition =  WinJS.Application.sessionState.mainPageScrollPosition;
                if (scrollPosition) {
                    listView.ensureVisible(scrollPosition);
                }
            });
        }

    In the ready function for your list page, call the loadPreviousState method after all your other initialization logic.

    Hope this works for you!

     

     


    Dave Paquette @Dave_Paquette www.davepaquette.com


    Wednesday, December 19, 2012 3:09 PM
  • Thanks Dave! Got it to work. The tiles reload a little slow but I'll figure that part out.
    Thursday, December 20, 2012 12:39 PM