Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can't use a <code>ListView</code> like this. The <code>ListView</code> control adds a whole stack of extra elements to do its work, which is causing your table problems.</p> <p>The answer is to work with the <code>WinJS.Binding.Template</code> control directly and use it to insert rows into your table element. Here is the HTML you'll need for the template:</p> <pre><code>&lt;table &gt; &lt;tbody id="myTemplate" data-win-control="WinJS.Binding.Template"&gt; &lt;tr &gt; &lt;td data-win-bind="innerText: label"&gt;&lt;/td&gt; &lt;td data-win-bind="innerText: value"&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>You need to put a complete table and <code>tbody</code> in the markup so that the browser doesn't get upset about finding an unattached tr element or insert the tbody element itself. The outer element of a template is discarded, so only the <code>tr</code> element will be generated from the template when you use it.</p> <p>Here is the markup for the table, where the generated elements will be inserted - this is what you had, except I have added an id attribute so I can find the element to insert content into from Javascript:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;col1&lt;/th&gt; &lt;th&gt;col2&lt;/th&gt; &lt;th&gt;col2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id="myTableBody"&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Finally, here is the code:</p> <pre><code>WinJS.UI.processAll().then(function () { var tableBody = document.getElementById("myTableBody"); var template = document.getElementById("myTemplate").winControl; topContent.forEach(function (item) { template.render(item, tableBody); }); }); </code></pre> <p>You need to make sure that the <code>Promise</code> returned by <code>WinJS.UI.processAll</code> is fulfilled before you use the template. Call the <code>render</code> method for each item you want to process - the arguments are the data item to pass to the template for data binding and the DOM element to insert the generated elements into.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload