locked
How to add new item in Group title page in Grid Layout in Windows Store app ?

    Question

  • By default there are six item titles in group title page, but I would like to add more and I tried to add via JSON but item titles also show up in Home screen. I want to add more items without showing them in Home screen of the app. 
    Wednesday, September 25, 2013 9:15 AM

Answers

  • Hi gr3en,

    I'm not sure what you mean by "I want to add more items without showing them in Home screen of the app", do you mean that for instance you have eight items but you only want to display six of them?

    If you look at this API: itemDataSource property, there is no filter for you to achieve your idea, therefore you should binding your list to another "filtered dataSource", which you could modify a bit of your code, binding the DataSouce to "displayList", for instance:

    WinJS.xhr({ url: "data/Recipes.txt" }).then(function(xhr) {
            var items =  JSON.parse(xhr.responseText);
            items.forEach(function(item){
                list.push(item);
                if(displayList.length<6)
                {
                    displayList.push(item);
                }
            });
        });

    Best Regards,

    --James 


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Thursday, September 26, 2013 7:02 AM
    Moderator

All replies

  • hi ,

    post some code samples

    Wednesday, September 25, 2013 11:43 AM
  • I am taking reference from Channel9 tutorial but kind of stuck. 

    I am using JSON parsing via text file to modify data of the grid template.

    Here is code snippet of data.js

     WinJS.xhr({ url: "data/Recipes.txt" }).then(function(xhr) {
            var items =  JSON.parse(xhr.responseText);
    
            items.forEach(function(item){
                list.push(item);
            });
        });

    and content of Recipes.txt is as follows:

    [ { "backgroundImage" : "images/Chinese/Chinese_1_600_C.jpg",
        "directions" : "Directions for the recipee ",
        "extraImages" : [ { "image" : "images/Chinese/Chinese_1_600_C.jpg" },
            { "image" : "images/Chinese/Chinese_2_600_C.jpg" },
            { "image" : "images/Chinese/Chinese_3_600_C.jpg" }
          ],
        "favorite" : false,
        "group" : { "backgroundImage" : "images/Chinese/chinese_group_detail.png",
            "description" : "Description of the recipe ",
            "groupImage" : "images/Chinese/chinese_group.png",
            "key" : "Chinese",
            "rank" : "",
            "recipesCount" : 6,
            "shortTitle" : "Chinese",
            "title" : "Chinese"
          },
        "ingredients" : [ "600 g Ground pork",
            "Ingredients required"
          ],
        "key" : 1000,
        "preptime" : 60,
        "rating" : 4,
        "shortTitle" : "Steam bun baos",
        "tileImage" : "images/Chinese/Chinese_1_150_C.jpg",
        "title" : "Steam bun baos"
      },
      { "backgroundImage" : "images/Chinese/Chinese_2_600_C.jpg",
        "directions" : "Directions for another recipee",
        "favorite" : false,
        "group" : { "backgroundImage" : "images/Chinese/chinese_group_detail.png",
            "description" : "Description of another recipe ",
            "groupImage" : "images/Chinese/chinese_group.png",
            "key" : "Chinese",
            "rank" : "",
            "recipesCount" : 6,
            "shortTitle" : "Chinese",
            "title" : "Chinese"
          },
        "ingredients" : [ 
               "Ingredients for another recipee"
          ],
        "key" : 1001,
        "preptime" : 45,
        "rating" : 3,
        "shortTitle" : "Breaded shrimp balls",
        "tileImage" : "images/Chinese/Chinese_2_150_C.jpg",
        "title" : "Breaded shrimp balls with hoisin sauce"
      }
    ]

    Main Screen

    Chinese group


    I want to add new recipes in Chinese group page and do not want to show them in main screen.

    Hope this helps :)

    Thursday, September 26, 2013 4:01 AM
  • Hi gr3en,

    I'm not sure what you mean by "I want to add more items without showing them in Home screen of the app", do you mean that for instance you have eight items but you only want to display six of them?

    If you look at this API: itemDataSource property, there is no filter for you to achieve your idea, therefore you should binding your list to another "filtered dataSource", which you could modify a bit of your code, binding the DataSouce to "displayList", for instance:

    WinJS.xhr({ url: "data/Recipes.txt" }).then(function(xhr) {
            var items =  JSON.parse(xhr.responseText);
            items.forEach(function(item){
                list.push(item);
                if(displayList.length<6)
                {
                    displayList.push(item);
                }
            });
        });

    Best Regards,

    --James 


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Thursday, September 26, 2013 7:02 AM
    Moderator