locked
What are these empty cells

    Question

  • Below is my program and html. This is windows 8 javascript html5. The image below is my problem. I do not know how it is getting displayed. It will show up as many times as I have actual data to show.  Thanks for any help.

    (function () {
        "use strict";
        var i = 0;
        var list = new WinJS.Binding.List([]);
        WinJS.Utilities.startLog({ type: "info", tags: "winner" });
        WinJS.UI.Pages.define("default.html", {
             ready: function (element, options) {
                list.push({ title: "Book1", text: "Texte 1" });
                list.push({ title: "Book2", text: "Texte 2" });
                list.push({ title: "Book3", text: "Texte 3" });
                list.push({ title: "Book4", text: "Texte 4" });
            },
        });
        var i = 1;
        function selectTemplate(itemPromise) {
                
            return itemPromise.then(function (item) {
               
                var container = window.document.createElement("div");
                container.style.width = "450px";
                container.style.position = "absolute";
                container.style.top = "250px";
          
                var childDiv = document.createElement("div");

                childDiv = document.createElement("scan");
                childDiv.setAttribute("id", "name");
                childDiv.innerText = myData.items._keyMap[i].data.title;
                i++;

                container.appendChild(childDiv);

                return container;

            });
        }
        WinJS.Utilities.markSupportedForProcessing(selectTemplate);
        WinJS.Namespace.define("myData",
           {
               items: list,
               template: selectTemplate
           });
    })();

    <div id="listView"
                    data-win-control="WinJS.UI.ListView"
                    data-win-options="{
                                       
                                       itemDataSource: myData.items.dataSource,
                                       itemTemplate: myData.template,
                                       selectionMode: 'none',
                                       tapBehavior: 'none',
                                       swipeBehavior: 'none'
                                      }">
    </div>

    Wednesday, April 24, 2013 12:47 AM

Answers

  • That did it. Thank you so much. I have been wrestling with this for four days (I did learn a lot BUT - Thank goodness there is someone there to help us).

    Thanks Again.

    • Marked as answer by baryo Thursday, April 25, 2013 8:48 PM
    Thursday, April 25, 2013 8:48 PM

All replies

  • This is likely what's called the "backdrop" image that's shown in a ListView with GridLayout by default. Here's what I wrote. Here's what I wrote about it in my book (just a paragraph as it was a late addition to ListView for Win8 (page 216 of the PDF):

    There is another ListView visual that is a bit like styling but not affected by styling. This is called the backdrop, an effect that’s turned on by default when you use the GridLayout. On low-end hardware, especially low-power mobile devices, panning around quickly in a ListView can very easily outpace the control’s ability to load and render items. To give the user a visual indication of what they’re doing, the GridLayout displays a simple backdrop of item outlines based on the default item size and pans that backdrop until such time as real items are rendered. As we’ll see in the next section, you can disable this feature with the GridLayout’s disableBackdrop property and override its default gray color with the backdropColor property.

    All this can be tricky to find as disableBackdrop and backdropColor are properties of the GridLayout object and not the ListView proper.

    In your code above, you'd want to add this line to your ListView's data-win-options:

    layout: {type: WinJS.UI.GridLayout, disableBackdrop: true }

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press




    Wednesday, April 24, 2013 3:38 PM
  • Thanks for the response Kraig, unfortunately, after adding the code the display did not change. Here is the code I added along with the results (note the actual data appears below the empty cells)

    <div id="listView"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{
              layout: {type: WinJS.UI.GridLayout, disableBackdrop: true }, 
              itemDataSource: myData.items.dataSource,
              itemTemplate: myData.template,
              selectionMode: 'none',
              tapBehavior: 'none',
              swipeBehavior: 'none'
                                      }">
    </div>

    Thanks

    Thursday, April 25, 2013 5:36 PM
  • OK, I see what's happening now, this is just the default hover effect for ListView items, but they're not aligning with your items because of these two lines in your item renderer:

                container.style.position = "absolute";
                container.style.top = "250px";

    Absolute positioning isn't something you want with list items, as this will (as we see here) really mess up the layout. Removing these two lines I get this:

    which looks more appropriate.

    Thursday, April 25, 2013 6:17 PM
  • Kraig, thanks, but now how would you position items on the page.

    thanks

    Thursday, April 25, 2013 8:03 PM
  • Position the ListView control itself, then the items are positioned relative to the ListView as they are child elements.
    Thursday, April 25, 2013 8:27 PM
  • That did it. Thank you so much. I have been wrestling with this for four days (I did learn a lot BUT - Thank goodness there is someone there to help us).

    Thanks Again.

    • Marked as answer by baryo Thursday, April 25, 2013 8:48 PM
    Thursday, April 25, 2013 8:48 PM
  • My pleasure. Reminds me of a poster I had as a teenager that said, "Experience is what you get when you didn't get what you wanted." I got the poster because it had a koala on it (my favorite animal), not realizing that those wise words would stick with me all this time. :)
    Thursday, April 25, 2013 8:50 PM