locked
creating a viewbox in Javascript

    Question

  • Hi All,

    I'm trying to programmatically create a viewBox in javascript(inside a ListView template function) but it doesn't seem to be working, when I look at my code in DOM Explorer all I get is:

    <div class="win-viewbox" id="nestedViewBox"></div>

    Can anyone tell me where I went wrong? here's my code(which is inside my template function):

                var nestedViewBox = document.createElement("div");
                nestedViewBox.id = "nestedViewBox";
                var viewBox = new WinJS.UI.ViewBox(nestedViewBox);
                
                var viewBoxChildContainer = document.createElement("div");
    
                viewBox.element.appendChild = viewBoxChildContainer;
                
                var transactions = Object.keys(currentItem.data.transactions._keyMap).map(function(key){return currentItem.data.transactions._keyMap[key].data});
                for(var i=0;i< transactions.length; i++){
                    console.log(transactions[i].description + ": " + transactions[i].amount)
                    var div = document.createElement('div');
                    div.style.width = transactions[i].amount;
                    div.style.backgroundColor = random_color();
                    viewBoxChildContainer.appendChild(div);
    
                }

    Wednesday, August 22, 2012 4:04 PM

Answers

  • Hi S,

    You have a couple of problems with your code.

    You are replacing the appendChild function of your viewBox element with an object (and it works!).

    You are not appending the first viewbox to anything.

    Instead... do this:

                var nestedViewBox = document.createElement("div");
                nestedViewBox.id = "nestedViewBox";
                document.body.appendChild(nestedViewBox);
                var viewBox = new WinJS.UI.ViewBox(nestedViewBox);
    
                var viewBoxChildContainer = document.createElement("div");
    
                viewBox.element.appendChild(viewBoxChildContainer);

    -Jeff

    Jeff Sanders (MSFT)

    Friday, August 24, 2012 6:51 PM
    Moderator

All replies

  • Hi S,

    You have a couple of problems with your code.

    You are replacing the appendChild function of your viewBox element with an object (and it works!).

    You are not appending the first viewbox to anything.

    Instead... do this:

                var nestedViewBox = document.createElement("div");
                nestedViewBox.id = "nestedViewBox";
                document.body.appendChild(nestedViewBox);
                var viewBox = new WinJS.UI.ViewBox(nestedViewBox);
    
                var viewBoxChildContainer = document.createElement("div");
    
                viewBox.element.appendChild(viewBoxChildContainer);

    -Jeff

    Jeff Sanders (MSFT)

    Friday, August 24, 2012 6:51 PM
    Moderator
  • thanks, yes I misunderstood how it works this clears it up. 
    Saturday, August 25, 2012 9:46 AM