locked
Problem with items in Grid App

    Question

  • Hey guys and girls

    I have this problem, and I'm quite sure that it's something basic to most of you. However, I've just started writing apps and I therefore have a problem with my Grid App in which I'm making my latest app.

    It's pretty basic. Just a math app to help me through school. I've managed to edit the layout of everything - group titles, subtitles, descriptions, images etc. And with that done, I've come to the "actual" coding - you know functions etc.

    I've written a Blank App that I want to get knitted together with let's say Item1 and then another with Item2 (not that I have to use the exact same linked together, I guess you have to write it into the Grid App, right?) However, when I change the HTML for the items, it changes on every single item - not just the one I want to make a modification. And that's fair enough, as I haven't defined which item the change should be done to. But how do I define this? The fact that when I for instance write <p>Hello World</p> it will only appear on Item1 and then I write <p>Contoso Cookbook </p> and it will only appear on Item2, but not Item1?

    Am I in some way to copy/paste my coding from the blank app into the Grid App and if I am - Where am I to paste it in?

    Hope that you can help, would appreciate it very much!


    By the way, I'm not so well known in different expressions / terms so if you can please write in a way that someone like me would understand :-) And please do ask if I have not been clear enough!


    Sunday, December 29, 2013 11:22 AM

Answers

  • Hi there,

    Thank you for your code, but unfortunately I do not have time to apply the code to my test environment, because code snippet will always miss something, but I know what your problem is.

    Here you want to bind "sampleGroups" or "sampleItems"  to your HTML element, I would like suggest you to use ListView instead, here is a detail tutorial for you: Quickstart: Adding a ListView.

    This line of code binding the "item.title" to all the HTML content which belongs to "<span class="pagetitle"></span>", that's why your HTML looks repeat.

    element.querySelector(".titlearea .pagetitle").textContent = item.title;

    I believe that ListView should help you with this issue, or this might be helpful too: How to use templates to bind data

    --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.

    Tuesday, December 31, 2013 9:32 AM
    Moderator
  • itemDetail.html is intended to display a selected item passed in from another page. It is easiest to use this code with a ListView control. as James said. Here is a topic that walks you through data binding with the VS project template code:

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

    Thursday, January 2, 2014 8:39 PM

All replies

  • Hi Andreasgaardsdal,

    Not quite sure if I understand your question, because I still don't know how you editing the Item. But just a quite simple question, did you assign ID to them? Without the identify how could the app recognize which item you are editing.

    --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.

    Monday, December 30, 2013 5:40 AM
    Moderator
  • Thanks for the reply!

    I'm going to attach a couple of screenshots and maybe that will help you understand my problem.

    By the way, some of the text is in Danish as I'm Danish (of course) and therefore I'd also like to apologize if I'm not clear enough. However, the text isn't that important, I guess.

    As for the ID - I have absolutely no idea of how to use it in this context, which means that I haven't applied it anywhere in my scripting unless the template already contained ID. The only time I have used ID was in a blank app where I used "document.getElementById("") and to this day I'm not quite sure how it worked, but it did.. :-)

    My questions is, and I'll do my very best to be clear this time:

    I want each of the different items to have different properties. I don't want it to say "First degree equation" on every item, but only on my first item in the first group. I have already made a properly working Blank App with equations - if that is of any use - and my item should contain the same properties as that Blank.


    This is a transcript from my Data.JS file:

    // Each of these sample groups must have a unique key to be displayed
            // separately.
            var sampleGroups = [
                { key: "group1", title: "Ligninger", subtitle: "At regne med ligninger", backgroundImage: billede1, description: groupDescription },
                { key: "group2", title: "Arealer og rumfang", subtitle: "At udregne arealer og rumfang", backgroundImage: billede6, description: groupDescription },
                { key: "group3", title: "Regneudtryk", subtitle: "Plus, minus, gange, dividere, potenser & kvadratrødder", backgroundImage: billede7, description: groupDescription },
                { key: "group4", title: "Trekantsberegning", subtitle: "Udregne forskellige værdier for trekanter", backgroundImage: lightGray, description: groupDescription },
                { key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
                { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
            ];

            // Each of these sample items should have a reference to a particular
            // group.
            var sampleItems = [
                { group: sampleGroups[0], title: "Linjens ligning", subtitle: "y = ax + b", description: description1, content: itemContent, backgroundImage: billede2 },
                { group: sampleGroups[0], title: "2. gradsligninger", subtitle: "y = ax^2 + bx + c", description: itemDescription, content: itemContent, backgroundImage: billede1 },
                { group: sampleGroups[0], title: "Opslagsværk", subtitle: "Find hurtigt, hvad du skal bruge", description: itemDescription, content: itemContent, backgroundImage: billede3 },
                //{ group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
               // { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },


    This is a transcript from itemDetail.HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>itemDetailPage</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="/pages/itemDetail/itemDetail.js"></script>
    </head>
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="itemdetailpage fragment">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">

                <!-- TODO: Content goes here. -->

            </section>
        </div>
    </body>
    </html>


    This is a transcript from my itemDetail.JS:

    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                var item = Data.resolveItemReference(options.item);
                element.querySelector(".titlearea .pagetitle").textContent = item.title;

                // TODO: Initialize the page here.
            }
        });
    })();

    As you might notice, I haven't changed the two last ones - as I have no clue what to write. Would be awesome if you could help me.

    As you might guess, I'm trying to make a math app which can calculate different sums etc., but I want to divide them into different items.

    Cheers

    -Andreas Gaardsdal

    Monday, December 30, 2013 9:16 AM
  • Hi there,

    Thank you for your code, but unfortunately I do not have time to apply the code to my test environment, because code snippet will always miss something, but I know what your problem is.

    Here you want to bind "sampleGroups" or "sampleItems"  to your HTML element, I would like suggest you to use ListView instead, here is a detail tutorial for you: Quickstart: Adding a ListView.

    This line of code binding the "item.title" to all the HTML content which belongs to "<span class="pagetitle"></span>", that's why your HTML looks repeat.

    element.querySelector(".titlearea .pagetitle").textContent = item.title;

    I believe that ListView should help you with this issue, or this might be helpful too: How to use templates to bind data

    --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.

    Tuesday, December 31, 2013 9:32 AM
    Moderator
  • itemDetail.html is intended to display a selected item passed in from another page. It is easiest to use this code with a ListView control. as James said. Here is a topic that walks you through data binding with the VS project template code:

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

    Thursday, January 2, 2014 8:39 PM