locked
define Picked Files from File picker as Listview datasource

    Question


  •  I am trying to Set files picked using filepiker as List view datasource. 
    In Windows 8 using Javascript.

    HTML:

    <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template">        
    <div class="smallListIconTextItem">            
    <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />            
    <div class="smallListIconTextItem-Detail">                
    <h3 data-win-bind="innerText: title"></h3>                
    <h6 data-win-bind="innerText: text"></h6>            
    </div>        
    </div>    
    </div>        
    <div id="listView_Id" data-win-control="WinJS.UI.ListView" data-win-options="{                        
    itemDataSource: FileData.itemList.dataSource,
    itemTemplate: select('#smallListIconTextTemplate'),
    }">
    JS:
    var dataArray = new Array();
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();                
     openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;                
    openPicker.fileTypeFilter.replaceAll([".epub"]);          
    var file;
    openPicker.pickMultipleFilesAsync().then(function (files) 
    {        
        if (files.size > 0) 
        {            
            for (var i = 0; i < files.size; i++) 
            {         
           dataArray.push({                    
                title: files[i].displayName,                    
                text: "Author",                    
                picture: "/images/BookImage.jpg"                
            });                
                var dataList = new WinJS.Binding.List(dataArray);                
                var publicMembers = 
                {                    
                    itemList: dataList                
                };                
                WinJS.Namespace.define("FileData", publicMembers);


    I have array with files data. But unable to get in ListView

    devendra


    • Edited by GDEVENDRAK Wednesday, December 4, 2013 2:04 AM
    Tuesday, December 3, 2013 10:22 AM

Answers

  • I think that this approach is fine since each time you add a new image to the List, you are re-assigning the itemDataSource with a new ListView, so the old/ previous reference is removed.


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

    • Marked as answer by GDEVENDRAK Friday, December 6, 2013 4:38 AM
    Friday, December 6, 2013 1:59 AM
    Moderator

All replies

  • Your code is incomplete. Please share a complete version of the demo code you are using or even better share your sample project via SkyDrive.

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

    Wednesday, December 4, 2013 12:51 AM
    Moderator

  • Hi Prashant H Phadke 

       I found a suggestion from here. It worked without setting the dataSource in HTML Listview.
     I can post my project in skydrive. Before that it is working fine. 
    Here is the Code I have. 

    HTML:
        <div id="listView_Id" data-win-control="WinJS.UI.ListView" style="left: 51.95px; top: 100.08px; ; border: double; border-color: lightblue; height: 580px; right: 35.06px;"
             data-win-options="{
                    itemTemplate: select('#smallListIconTextTemplate'),
                    selectionMode: 'multi',
                    tapBehavior: 'none',
                    layout: { type: WinJS.UI.GridLayout }
                }">
        </div>
    JS:
                var dataArray = new Array();
                function pickFiles(eventInfo) {
                    // Create the picker object and set options
                    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
                    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
                    openPicker.fileTypeFilter.replaceAll([".epub"]);
                    var file;
                    // Open the picker for the user to pick a file
                    openPicker.pickMultipleFilesAsync().then(function (files) {
                        if (files.size > 0) {
                            // Application now has read/write access to the picked file(s)
                            for (var i = 0; i < files.size; i++) {
                                var fileName = files[i].displayName;
                                var length = fileName.length;
                                if (fileName.length > 30)
                                {
                                    var ch = fileName.slice(0, 40);
                                    fileName = ch + '...';
                                }
                                dataArray.push({ title: fileName, text: "Author", picture: "/images/BookImage.jpg" });
                            }
                            var dataList = new WinJS.Binding.List(dataArray);
                            var listControlDiv = document.getElementById("listView_Id");
                            var listControl = listControlDiv.winControl;
                            listControl.itemDataSource = dataList.dataSource;
                        }
                    });
                }
    
     Here I am changing the array to datasource of Listview. 
    Let me know whether it is better way or not.

    Thanks for Considering my post.

    devendra



    • Edited by GDEVENDRAK Wednesday, December 4, 2013 1:01 PM
    Wednesday, December 4, 2013 2:05 AM
  • Can you upload your project to SkyDrive? This link shows how you can share files using SkyDrive: http://windows.microsoft.com/en-us/skydrive/share-file-folder

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

    Thursday, December 5, 2013 1:39 AM
    Moderator


  • Hi Prashant H Phadke 


     Here is the Link . Please look at my post for changed Details.

    Thanks


    devendra

    Thursday, December 5, 2013 8:31 AM
  • I think that this approach is fine since each time you add a new image to the List, you are re-assigning the itemDataSource with a new ListView, so the old/ previous reference is removed.


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

    • Marked as answer by GDEVENDRAK Friday, December 6, 2013 4:38 AM
    Friday, December 6, 2013 1:59 AM
    Moderator