locked
WinJS.UI.ListView can't bind large data set( more than 20,000)

    Question

  • When I develop a Windows 8 App via WinJS, I got this problem.

    I have a data set with more than 20,000 items. After I bind this large set and they display in WinJS.UI.ListView. But when I drag the the scroll bar to the tail position, the scroll bar will be set back automatically. 

    If I scroll the scroll bar through the mouse wheel, I got that all data at last are lost and can not be displayed, which position more than 14900. 



    I want to know how the WinJS.UI.ListView could supported more than 20000 items well.

         <div  data-win-control="WinJS.Binding.Template" id="listViewTemplate" style="display:none">       

    <div style="height:50px;width:100px;background-color:gray">               

    <h2 data-win-bind="innerText: data0"></h2>               

    <h6 data-win-bind="innerText: name"></h6>       

    </div>   

    </div>   

    <div style="width:98%; height:10%;;overflow:auto" id="listview" data-win-control="WinJS.UI.ListView"

    data-win-options="{itemTemplate:select('#listViewTemplate'), itemDataSource: DataCenter.DataSource.dataSource}">

    </div> 




    The DataCenter.DataSource is a simple WinJS.Binding.ListView with 20000 items.

    Hope who can resolve it.
    Thanks,
    Zonas Sun


     
    Wednesday, February 20, 2013 3:43 AM

Answers

  • Hi Zonas

    In the document in below link they state the following:

    Maximum number of items

    The ListView doesn't support more than 1.5 million pixels worth of items

    msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

    I cannot post links at the moment so above is preceded with http:// 

    Paul

    Monday, February 25, 2013 7:37 PM

All replies

  • Does this has relation with the limitation of ListView maximum Width or Div maximum Width?
    Wednesday, February 20, 2013 3:56 AM
  • Zonas,

    I'm assuming the data source you've bound to is a static data set? If that's the question, I have to ask that we take a step back to ask what is the use case or need behind having to load all 20,000 items at once? I can't imagine anyone actually looking through all 20,000 items.

    Wednesday, February 20, 2013 4:11 AM
  • Thank you for your reply, got.dibbs

    Our data source is a custom data source and the data would be return when the scroll of listview is draged to the last position.

    But, I think you are right. Nobody would look throught all 20,000 items one time normally, but our data is come from remote service, and  listview may hold a large data set in special situation.

    I want to know reason why the problem happens, item canvas too long? or Html can't support such long HTML content ? or any other reason?

    I think if the HTML can support such long HTML content, this problem could be resovled in other ways.

    Wednesday, February 20, 2013 5:11 AM
  • I think you'll need someone from Microsoft to directly answer your question about why it has issues with that large of a dataset, but my guess is it hasn't been tested/designed to support an in memory dataset that large.

    If your data source is remote, have you considered implementing a data source for your listview and letting the listview page through the data itself? You can see this article for more on creating a custom data source for your list view: http://msdn.microsoft.com/en-us/library/windows/apps/Hh770849.aspx

    Wednesday, February 20, 2013 2:38 PM
  • Hi Zonas,

    So as for the scrolling position and data displaying (near the end of data source) issue, you can reproduce it via a static data source with about 20000 items, correct? If so, would you please provide a simplified test solution (you can upload it to skydrive or other web storage) so that we can get it and run locally to check the behavior.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, February 21, 2013 5:41 AM
    Moderator
  • In my opinion, it must be something to do with the amount of data and the available memory on the device.

    ListView often draws certain amount of pages of items depending on the Threshold and Pages to show parameters you set. When ListView is constructing the set of items, it has to measure each's dimensions to know exactly how many and how to position them, thus in a scenario where the data is pretty large, you have to optimize it somehow.

    First, take a look at "loadingBehavior", by default, ListView uses "randomaccess" (this is optimum for static collections, there is another option "", for dynamic collections called "incremental) which has the effect of showing a scrollbar for the whole 20000 items but only keeps only 5 pages or screens of items in memory (with a limit of 1000 items). If you are using "randomaccess", make sure you have less than 1000 items in 5 pages. When the user scrolls farther than those 5 pages, ListView will swap those pages out and load new ones dinamically, they are not actually destroyed but "recycled" because its way more expensive to create a DOM element than to change it's properties or content.

    Check this example for a working sample of the behavior:

    DevCenter HTML ListView loading behaviors sample

    Additionally, you should check this one out, it's specially for optimizing the ListView performance: HTML ListView optimizing performance sample

    Finally, I will advice a quick read of Page 233 of Programming Windows 8 Apps with HTML,CSS and Javascript that has a section called Optimizing ListView Performance, that explains what I described but in much more detail and refers to the examples I just linked, and guides you in optimizing your ListView.

    Friday, February 22, 2013 12:28 PM
  • Hi Zonas

    In the document in below link they state the following:

    Maximum number of items

    The ListView doesn't support more than 1.5 million pixels worth of items

    msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

    I cannot post links at the moment so above is preceded with http:// 

    Paul

    Monday, February 25, 2013 7:37 PM