locked
Using WinJS.UI.Repeater to build table's tbody - how to make it scrollable? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I successfully used the WinJS.UI.Repeater to build up my tables tbody rows. However those items are not scrollable.

    Is this still not possible in IE11 without hacks?

    Monday, March 31, 2014 4:08 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    The repeater itself won't add any automatic scrolling functionality. If you want to add scrolling functionality to  your table, you will need to manually add the formatting to the table. For example, if you take a look at the HTML Repeater sample: http://code.msdn.microsoft.com/windowsapps/HTML-Repeater-control-da22d278 and then modify/replace the scenario1.html with the following table, you should be able to get the desired scrolling:

            <h2>HTML Repeater Control with <code>table</code> HTML element</h2>
        <table class="table" style="width:375px;">
            <thead class="table-header" style="display:block">
                <tr>
                    <td style="width:50px;">Id</td>
                    <td style="width:300px;">Description</td>
                </tr>
            </thead>
            <tbody class="table-body" data-win-control="WinJS.UI.Repeater" data-win-options="{data: Data.items}" style="height: 50px;overflow-y:scroll;display:block;">
                <tr class="table-body-row">
                    <td style="width:50px;" data-win-bind="textContent: id"></td>
                    <td style="width:300px;" data-win-bind="textContent: description"></td>
                </tr>
            </tbody>
        </table>

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Monday, March 31, 2014 11:17 PM
    Moderator