locked
Using a template in HTML setup the style RRS feed

  • Question

  • Hey there,

    So I'm using a WinJS.Binding.Template to display some data on my page.  I want my data to be displayed in a table format, but when I try and do the CSS formatting to have it look like that it isn't working.  I'm wondering if I have to go about styling it outside of the template? I'm not sure.

    Here's my HTML that's involved:

    <p id="name"></p>
    
                <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    	            <div id="ssnf">
                        <p><strong>Social Security:</strong></p>
                        <div data-win-bind="innerText: ssn"></div>
                    </div>
                    <div id="dobf">
                        <p><strong>Date of Birth:</strong></p>
                        <div data-win-bind="innerText: dob"></div>
                    </div>
                </div>

    Here's the JS involved:

    function displayItems(index) {
            
            //do the code to get the correct element to show up
            var templateElement = document.getElementById("itemTemplate");
            var targetElement = document.getElementById("name");
            WinJS.Utilities.empty(targetElement);
            templateElement.winControl.render(DataExample.itemList.getAt(index), targetElement);
        }

    So I'm clicking an item in a listview, that's why I have the index. And there is specific information that is tied to that index.  That is all working fine, the correct information is being rendered on the screen.  The problem is that when I try to style the id's in the template, nothing is changing. 

    My related CSS:

    #itemTemplate {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        display: -ms-grid;
    }
    
    #ssnf {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
    
    #dobf {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }

    It's still showing up vertically as if I made it with multiple rows instead of columns. 

    Thursday, April 18, 2013 8:26 PM

Answers

  • Hi Zach,

    Try using a table with the following HTML markup to display items in a tabular fashion...The JS remains the same and you can format your table as you like...

    HTML:
    =====

        <!-- Data Container -->
        <table>
            <thead>
                <tr>
                    <th>Social Security:</th>
                    <th>Date of Birth:</th>
                </tr>
            </thead>
            <tbody id="name"></tbody>
        </table>

        <!-- Data Template -->
        <table>
            <tbody id="itemTemplate" data-win-control="WinJS.Binding.Template">
                <tr>
                    <td data-win-bind="innerText: ssn"></td>
                    <td data-win-bind="innerText: dob"></td>
                </tr>
            </tbody>
        </table>

    Thanks,

    Prashant


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, Windows Store & Phone Developer Solutions

    • Marked as answer by ZachAtttack Friday, April 19, 2013 2:50 PM
    Friday, April 19, 2013 12:41 AM
    Moderator

All replies

  • Hi Zach,

    Try using a table with the following HTML markup to display items in a tabular fashion...The JS remains the same and you can format your table as you like...

    HTML:
    =====

        <!-- Data Container -->
        <table>
            <thead>
                <tr>
                    <th>Social Security:</th>
                    <th>Date of Birth:</th>
                </tr>
            </thead>
            <tbody id="name"></tbody>
        </table>

        <!-- Data Template -->
        <table>
            <tbody id="itemTemplate" data-win-control="WinJS.Binding.Template">
                <tr>
                    <td data-win-bind="innerText: ssn"></td>
                    <td data-win-bind="innerText: dob"></td>
                </tr>
            </tbody>
        </table>

    Thanks,

    Prashant


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, Windows Store & Phone Developer Solutions

    • Marked as answer by ZachAtttack Friday, April 19, 2013 2:50 PM
    Friday, April 19, 2013 12:41 AM
    Moderator
  • although this did answer my question, I still have a further question regarding this since my example was a very dumbed down version of what I'm doing.... My follow-up question is how do I then style the table how I want?  Do I format the table rows and columns by changing the <table> to <table id="x"> and then in the css change it? And if so do i do that on the template side or container side?  And then because the <th> and <td> are two separate things how do I tell the CSS that they are both column x row y, I'm assuming I can say they're the same since one is tagged as the head and the other the data? 

    Thanks!

    Friday, April 19, 2013 3:19 PM
  • You can style either the container table or the template table. You can also add a binding property to each cell to have it a specific style. For example to give different background colors to your cells, you can add something like this:

    <td data-win-bind="innerText: ssn; style.background: cellBGColor"></td>

    where cellBGColor is defined in your data:

        var dataArray = [
           { fname: "Barry", lname: "Charles", ssn: "144-44-4444", dob: "1-2-1958", nationality: "American", picture: "/images/storelogo.png", cellBGColor: "red" },
           { fname: "Tim", lname: "Sanders", ssn: "244-44-4444", dob: "2-2-1958", nationality: "American", picture: "/images/storelogo.png", cellBGColor: "blue" },
           { fname: "Jeff", lname: "Edwards", ssn: "144-44-4444", dob: "13-2-1958", nationality: "American", picture: "/images/storelogo.png", cellBGColor: "green" }
        ];


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, Windows Store & Phone Developer Solutions

    Friday, April 19, 2013 11:35 PM
    Moderator