How to Control Order of Groups using Split App Template

Question

I am using the Split App template (JavaScript and HTML) to build the sample blog reader that is shown in the sample docs in the Windows Store Dev Center. Each tile represents a different blog that is called "async" - the problem is that the order of these tiles (i.e. groups) changes, I believe on what is received first. How do I call each blog "async" but then still control how the blog tiles are displayed on the main page of the Split App. I want them to display in the same order as shown in the data.js file (e.g. blog1, blog2, blog3, etc.) where blog 2 tile is right under blog 1 and blog 3 tile is to the right of blog 1 in the same row.

Answer 1

Hi hoWIWeb,

I think you can control the order of groups (displayed in ListView) by customize the compare callback function supplied to WinJS.Binding.List.createGrouped method (see reference below):

#How to group items in a ListView (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh465464(v=vs.85).aspx

---

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

Answer 2

Thanks Steven, the article led me down a path which revealed the answer was much more simpler than using the compareGroups function. The blogs I was pulling in were over 10 and I was using the notation of blog1, blog2,...,blog10,...

So the order was showing blog1 first, then showing blog10 second, skipping "blog2" through "blog9"

I renamed everything starting with blog11, blog12,....,n and the order works fine now.

blogs = [
            {
                key: "blog1", url:
           'http://...',
                title: 'tbd', subtitle: 'subtitle', updated: 'tbd',
                backgroundImage: booksGroup,
                acquireSyndication: acquireSyndication, dataPromise: null
            },
            {
                key: "blog10", url:
           'http://...',
                title: 'tbd', subtitle: 'subtitle', updated: 'tbd',
                backgroundImage: booksGroup,
                acquireSyndication: acquireSyndication, dataPromise: null
            },