locked
settings variable width for template of listView RRS feed

  • Question

  • Hi All

    I'm creating a list that needs to have variable widths for the templates... Anyone have a clue how I would go about this?

    Friday, August 17, 2012 2:34 PM

Answers

  • You want to use the 'WinJS.UI.ViewBox' control in conjunction with the -ms-grid.  You can define your control using the numbers you have specified using the -ms-grid columns, and then size it in the outer container and it will scale to fit.  You can set the grid column sizes and items in code. 

    Here is a simple example where I am using static values for the grid columns and the items in the grid (you will need to modify this to do it all in code):

    //default.css
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        -ms-flex-align: center;
        -ms-flex-direction: column;
        -ms-flex-pack: center;
        display: -ms-flexbox;
        background-color:antiquewhite
    }
    
    .outerContainer {
        height:70px;
        width: 700px;
        background-color:azure;
    }
    .myContainer {
        -ms-grid-columns: 20px  40px  60px  10px  100px;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
        height:50px;
        width: 500px;
        background-color:red;
    }
    
    .item1 {
        -ms-grid-column: 1; -ms-grid-row: 1;
        background-color:blue;
    }
    
    .item2 {
        -ms-grid-column: 2; -ms-grid-row: 1;
        background-color:orange;
    }
    
    .item3 {
        -ms-grid-column: 3; -ms-grid-row: 1;
        background-color:yellow;
    }
    
    .item4 {
        -ms-grid-column: 4; -ms-grid-row: 1;
        background-color:white;
    }
    
    .item5 {
        -ms-grid-column: 5; -ms-grid-row: 1;
        background-color:black;
    }
    
    // default.html
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App5</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- App5 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div class="outerContainer">
        <div data-win-control="WinJS.UI.ViewBox">
            
        <div class="myContainer">
    		    <div class="item1"></div>
                <div class="item2"></div>
                <div class="item3"></div>
                <div class="item4"></div>
                <div class="item5"></div>
        </div>
        
    	</div>
            </div>
    </body>
    </html>

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, August 21, 2012 12:59 PM
    Moderator

All replies

  • A scrollable div containing divs with different widths?


    Jeff Sanders (MSFT)

    Friday, August 17, 2012 2:55 PM
    Moderator
  • No it doesn't need to be scrollable. It just needs to be a bunch of templates/list items/itemrenderers laid out horizontally with different widths. So in the sample image each different colour would be a list item, the width of each item is representative of an amount.
    Friday, August 17, 2012 3:46 PM
  • You can then make the outer div not scrollable and programmatically add your images and event handlers.  You cannot use the GridView control to set arbitrary widths.

    Jeff Sanders (MSFT)

    Friday, August 17, 2012 3:48 PM
    Moderator
  • Thanks,

    What exactly does the fact that the outer div is scrollable or not have to do with it? I'm going to assume here that setting the scrollable condition will not allow the contents of the div to be scrolled, if I'm setting the content programmatically then surely I would create the contents within the size constraints of the div?

    Also, would you happen know of a good tutorial showing how to create content programmatically?

    Monday, August 20, 2012 7:11 AM
  • Hi S,

    Correct, if you want to ensure you see all of the contents without scrolling you would not want the outer <div> to be scrollable.

    There are a couple of options you could use such as viewbox or flex box.  Can you give a sample of the data you would be displaying so I can help you choose what would work best for you?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 20, 2012 1:32 PM
    Moderator
  • Hi Jeff

    Ok so I've attached an image with some annotations explaining what I need. I'll also give you a breakdown of what I have in mind.

    So what I'm focusing on now is a listView which contains list items which give a breakdown of how much has been spent in each category. So in my image the listItem is called DIV3 and it's outlined in red. Now for that list item I've created a template in javascript which uses div.style.display = "-ms-grid"; to create my layout as seen in the image.

    Now I'm populating this information with a Multidimensional array and I want to now create a graphic (which in my image I've labled "this is the graphic I’m trying to create." ) based on values in that array. 

    So to explain this graphic I'm trying to create, it's basically a progress bar, but instead of being a normal progress bar it shows progress in the form of different colour blocks with each colour block representing a transaction and dependent on it's value in relation to the overall value of the bar it will take up said amount of space to represent visually it's value. What I'd like is that if your hover your mouse over one of the blocks it shows a tooltip containing a string describing that transaction. Then clicking it would navigate you to a page giving your more information about that transaction.

    So really that's all I want to do. I was also wondering where the best place would be to create my bar graphic and was thinking maybe I could do it inside of the function that defines my template?

    so roughly my data array would look something like this

    var myBarData  =  [

    {amount:12, description: "coffee at starbucks", link:"somepage.html"},

    {amount:22, description: "breakfast", link:"somepage.html"},

    {amount:52, description: "snack", link:"somepage.html"},

    {amount:72, description: "muffin somewhere", link:"somepage.html"}

    ];

    var firstLvlArray = [

    {cat: insurance, threeMonth:1231, spentSoFar:345, target: 2321, barData: myBarData },

    ];


    Monday, August 20, 2012 3:54 PM
  • You want to use the 'WinJS.UI.ViewBox' control in conjunction with the -ms-grid.  You can define your control using the numbers you have specified using the -ms-grid columns, and then size it in the outer container and it will scale to fit.  You can set the grid column sizes and items in code. 

    Here is a simple example where I am using static values for the grid columns and the items in the grid (you will need to modify this to do it all in code):

    //default.css
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        -ms-flex-align: center;
        -ms-flex-direction: column;
        -ms-flex-pack: center;
        display: -ms-flexbox;
        background-color:antiquewhite
    }
    
    .outerContainer {
        height:70px;
        width: 700px;
        background-color:azure;
    }
    .myContainer {
        -ms-grid-columns: 20px  40px  60px  10px  100px;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
        height:50px;
        width: 500px;
        background-color:red;
    }
    
    .item1 {
        -ms-grid-column: 1; -ms-grid-row: 1;
        background-color:blue;
    }
    
    .item2 {
        -ms-grid-column: 2; -ms-grid-row: 1;
        background-color:orange;
    }
    
    .item3 {
        -ms-grid-column: 3; -ms-grid-row: 1;
        background-color:yellow;
    }
    
    .item4 {
        -ms-grid-column: 4; -ms-grid-row: 1;
        background-color:white;
    }
    
    .item5 {
        -ms-grid-column: 5; -ms-grid-row: 1;
        background-color:black;
    }
    
    // default.html
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App5</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- App5 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div class="outerContainer">
        <div data-win-control="WinJS.UI.ViewBox">
            
        <div class="myContainer">
    		    <div class="item1"></div>
                <div class="item2"></div>
                <div class="item3"></div>
                <div class="item4"></div>
                <div class="item5"></div>
        </div>
        
    	</div>
            </div>
    </body>
    </html>

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, August 21, 2012 12:59 PM
    Moderator
  • you sir, are a genius!

    Thanks, this is exactly what I need. Now to make it all work with my data : /

    Wednesday, August 22, 2012 11:42 AM
  • Hi Jeff

    I'm currently working on creating my viewBox inside of my listView.

    I'm iterating through the list like this:

    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)
                }
    Is that the way it's done? It works but feels dirty 
     

     

    Wednesday, August 22, 2012 3:35 PM
  • It would depend on what type of object you are iterating over but it looks fine to me!

    Jeff Sanders (MSFT)

    Wednesday, August 22, 2012 4:22 PM
    Moderator
  • since it's a list I was hoping I could use forEach but it says that method doesn't exist(even though it is a List) Is there a way to do casting in javascript?
    Monday, August 27, 2012 4:39 PM