locked
How can I create a dual list with a Grid Template?

    Question

  • I have designed an App with the Grid Template but I designed for show in the first page Groups and no Items, but now I want to add some items in a new category called: "Top 5", I'm sure I need to add a new list but I don't know how, could somebody give an idea?

    Federico Navarrete

    Friday, January 25, 2013 5:05 PM

Answers

  • Hi FANMixco,

    It seems you've changed the default data source items so as to let the ListView show groups (instead of items) directly. If this is the case, then you can just add more items into the "group data collection" (the sampleGroups variable in your case), and assign a "top5" key for the new added groups so as to make them different from other groups. Also, if you want to let ListView show different UI for different groups (so as to differentiate the normal groups and the top 5 items), you can consider using templating function. Templating function let you programmtically construct the UI (and bind event handlers) for each ListView item rather than using statically defined item template (in html file).

    #How to create a templating function (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx

    Another possible approach is to add a separate ListView (put it aside with the existing ListView) which shows only the top 5 items. Thus, you can use a separate list as datasource for the new ListView. But you need to carefully design the page UI layout so as to make them looks like a single ListView


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

    • Marked as answer by Song Tian Thursday, January 31, 2013 12:49 PM
    Tuesday, January 29, 2013 4:58 AM
    Moderator

All replies

  • Do you mean you need a new group which has some items, can you please also share your code, questions with code are often more easier to understand and quicker to reply.


    Zubair Ahmed | @zubairdotnet | zubairahmed.net | Win8RssReader.codeplex.com | facebook.com/zubair.ahmed.public

    Friday, January 25, 2013 5:27 PM
  • This is the big change that I've done is in the groupedItems.js

            _initializeLayout: function (listView, viewState) {
                /// <param name="listView" value="WinJS.UI.ListView.prototype" />
                listView.itemDataSource = Data.groups.dataSource;
                listView.groupDataSource = null;
    
                if (viewState === appViewState.snapped) {
                    listView.layout = new ui.ListLayout();
                } else {
                    listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
                }
            },
    

    With this code is you don't show the items in the groupedItems.html you only show the groups and it's information, but I need a new option for example, I have this:

            var sampleGroups = [
                { key: "group1", title: "Comidas:", verticalImage: location + "vertical/comidas.jpg", horizontalImage: location + "horizontal/comidas.jpg", description: "El Salvador es un país muy rico en su comidas exisitiendo una gran diversidad de ellas, siempre que visitamos este pequeño y querido país lo más representantivo son nuestras deliciosas pupusas." },
                { key: "group2", title: "Bebidas:", verticalImage: location + "vertical/bebidas.jpg", horizontalImage: location + "horizontal/bebidas.jpg", description: "El Salvador es un país muy rico incluso en sus bebidas donde existen grandes variedades desde bebidas calientes siendo las más representantivas y algunas frías." },
                { key: "group3", title: "Postres y dulces:", verticalImage: location + "vertical/postres.jpg", horizontalImage: location + "horizontal/postres.jpg", description: "Los dulces en El Salvador sin lugar a dudas es uno de sus mayores delietes teniendo una gran diversidad siendo muchos de ellos basados en leche." },
                { key: "top5", title: "Los más votados", verticalImage: location + "vertical/top.jpg", horizontalImage: location + "horizontal/top.jpg", description: "Estas son las más recetas más votadas por nuestros usuarios." }        ];
    

    And for example the final item: top5 must show the items like in this image:

    The CSS as you have seen I have it. If you could help me I'll be very happy, thank you very much.


    Federico Navarrete

    Friday, January 25, 2013 6:24 PM
  • you need to edit groupedItems (js) and  groupedItems (CSS)

    here is an tutorial for what you want

    How to brand your ListView


    http://msdn.microsoft.com/en-us/library/windows/apps/hh700356.aspx
    • Edited by Ruezaki Friday, January 25, 2013 9:33 PM
    Friday, January 25, 2013 9:32 PM
  • Hi FANMixco,

    It seems you've changed the default data source items so as to let the ListView show groups (instead of items) directly. If this is the case, then you can just add more items into the "group data collection" (the sampleGroups variable in your case), and assign a "top5" key for the new added groups so as to make them different from other groups. Also, if you want to let ListView show different UI for different groups (so as to differentiate the normal groups and the top 5 items), you can consider using templating function. Templating function let you programmtically construct the UI (and bind event handlers) for each ListView item rather than using statically defined item template (in html file).

    #How to create a templating function (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx

    Another possible approach is to add a separate ListView (put it aside with the existing ListView) which shows only the top 5 items. Thus, you can use a separate list as datasource for the new ListView. But you need to carefully design the page UI layout so as to make them looks like a single ListView


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

    • Marked as answer by Song Tian Thursday, January 31, 2013 12:49 PM
    Tuesday, January 29, 2013 4:58 AM
    Moderator