locked
Automatic data set refresh issue in ListView

    Question

  • I have implemented the ListView using custom templates. The list is getting displayed properly in my device. But, when I scroll the list it takes me to the first element whenever I pass the item at the middle of the list. I tried debugging the code, and I found that the "render" method is getting called by some external code while scrolling the list. Following is the code written inside my render method. 

    listView.itemTemplate = renderer;
    var story = new WinJS.Binding.List(channelStories);
    listView.itemDataSource = story.dataSource;	   
    
    
    
     function renderer(itemPromise) {     
            return itemPromise.then(buildElement); 
        };
    
        function buildElement(item) {
            var div = document.createElement('div');
            div.setAttribute("index", item.index);
            div.className = "newsRow";
            if (template == "1") {
                var img = document.createElement('img');
                img.className = "newsimage";
                var heading = document.createElement('h5');
                heading.className = "heading";
                if (heading) {
                    heading.innerText = item.data.short_title;
                }
    
                if (item.index % 3 == 0) {
                    div.className = "newslargediv";
                    div.className += " storyPromoDiv";
                    heading.className = "headingLarge";
                    if (img) {
                        img.src = item.data.promo_images.promo_large.promo_image_path + "mdpi/" + item.data.promo_images.promo_large.promo_image_name;
                    }
    
                } else {                
                        heading.className = "heading";
                        if ((item.index - 1) % 3 == 0) {
                            div.className = "newsDivWithMargin";
                            div.className += " storyPromoDiv";
                        } else {
                            div.className = "newsdiv";
                            div.className += " storyPromoDiv";
                        }
    
                        if (img) {
                            img.src = item.data.promo_images.promo_small.promo_image_path + "hdpi/" + item.data.promo_images.promo_small.promo_image_name;
                        }
    
                }
    
                div.appendChild(img);
                if (item.data.show_short_title == "true") {
                    div.appendChild(heading);
                }
    
    		return div;
    
    }

    I am really stuck at this point, any help will be appreciated. Thanks in advance.

    Thursday, April 16, 2015 3:08 PM

Answers

  • Is the ItemsPanel an ItemsStackPanel?  I think there's a bug in that control which causes this issue.  You can work around it by using StackPanel.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, April 16, 2015 7:37 PM
    Moderator