Home/ Questions/Q 8948539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:01:05+00:00

this is my first Windows 8 app… I’m having this last problem before going

  • 0

this is my first Windows 8 app… I’m having this last problem before going live with it. 🙂

I have a ListView with layout set to GridLayout. The app adds 50 items to the ListView’s datasource when the main page is loaded. The ListView takes 5-6 seconds to render.

NB: 5-6 seconds after the items have been added to the dataSource. XHR/AJAX call + loading takes 200-300ms.

This seems very weird. I’ve added some code below:

JS – Defining the ListView and Data Source

this.categoryProducts = new WinJS.Binding.List();
this.productListview = element.querySelector('#category-products-listview').winControl;
this.productListview.itemTemplate = element.querySelector('#product-template');
this.productListview.itemDataSource = this.categoryProducts.dataSource;
this.productListview.oniteminvoked = this._product_clicked.bind(this);

JS – Adding items to Data Source

_ref = data.products;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
   product = _ref[_i];
   _results.push(Category.categoryProducts.push(product));
}

HTML:

<div id="product-template" data-win-control="WinJS.Binding.Template">
    <div class="item product">
        <img class="item-image" src="/images/shopping-bag.png" data-win-bind="src: thumbnail; alt: name" onError="this.src='/images/shopping-bag.png';" />

        <div class="item-details" >
            <div class="item-details-top">
                <h4 class="item-title" data-win-bind="textContent: name"></h4>

            </div>
            <div class="item-details-bottom">
                <div  class="price"> <span style="font-weight:bold;">$</span> <span data-win-bind="textContent: price"></span></div> 
                <div class="reviews" ><span class="icon-comments"></span> <span data-win-bind="textContent: reviews_count"></span></div> 
                <div class="stars" > <span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span>  <span data-win-bind="textContent: stars"></span></div>
            </div>
        </div>
    </div>
</div>

This is what the ListView looks like when rendered.

enter image description here

Any idea guys?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you add items to the dataSource before or after you set up the ListView? Not saying this is it, but wondering if you are getting a lot of churn by adding items the way you are. I would pull down the items and create a new Binding List and then set the dataSource.

    I have loaded 100s of items into a listView with minimal delay.

    1. Set up ListView with empty List
    2. Pull data from web
    3. Create new Binding List with results from web call
    4. Update ListView with new datasource from new List

    Your mileage may vary…

    • 0