locked
How to get selected listview item value ?

    Question

  • I have one listview with mutlitples items and i'm trying to get the value of selected item in order to show this value in my appbar flyout.

        <div class="itemspage fragment">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Title</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
                        selectionMode: 'single',
                        currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
                        itemDataSource: Data.groups.dataSource,
                        itemTemplate: select('.itemtemplate'),
                        layout:{type:WinJS.UI.GridLayout},
                        oniteminvoked: select('.pagecontrol').winControl.itemInvoked
                    }">
                </div>

    It may be simple but i have no idea tohandle this. How can we do that ?

    Tuesday, March 25, 2014 6:24 PM

Answers

  • I would recommend you to set a id for you listview (any reason to use class instead of id?), for instance "myListview", then you can use the code like:

    lView = element.querySelector("#myListview").winControl;

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 26, 2014 2:15 AM
    Moderator
  • Hi Shnabr,

    "How to get the title of listview selected item", in which control you put the title words? You should really find that control first. Let's say if you have only one text item in the DataTemplate, we can use something like below

    lViewSelection.getItems().done(function(items){var item = items[0];});

    Try to modify the code to fit your situation, hope it helps.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 26, 2014 8:54 AM
    Moderator
  • if (itemsNumber == 1) {
                    document.getElementById('appbar').winControl.show();
                    document.getElementById('appbar').winControl.showCommands([deliver, deleteworkshop, workshopsSep, goldIamgesSep]);
                    lViewSelection.getItems().done(outputParagraph.value = items[0].data.title);
                }
    

    Thank you Jamles, i finally understand how to do it.

    • Edited by Shnabr Wednesday, April 2, 2014 11:06 AM
    • Marked as answer by Shnabr Wednesday, April 2, 2014 11:06 AM
    Wednesday, March 26, 2014 2:58 PM

All replies

  • Hi Shnabr,

    Well, selection property is a good choice. See the link I provided for more information and some code snippet.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 26, 2014 1:48 AM
    Moderator
  • Hi James, I've already try this with this code snippet but getting an error.

    (function () {
        "use strict";
    
        var ui = WinJS.UI;
    
        ui.Pages.define("/pages/items/items.html", {
            // This function is called to initialize the page.
            init: function (element, options) {
                this.itemInvoked = ui.eventHandler(this._itemInvoked.bind(this));
            },
    
            // This function is called whenever a user navigates to this page.
            ready: function (element, options) {
    
                lView = element.querySelector("#itemslist win-selectionstylefilled").winControl;
                outputParagraph = element.querySelector("#myFlyout");
                lView.addEventListener("selectionchanged", this.selectionChanged); 
    
               
            // This function updates the page layout in response to layout changes.
            updateLayout: function (element) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in layout.
            },
    
            _itemInvoked: function (args) {
                var groupKey = Data.groups.getAt(args.detail.itemIndex).key;
                WinJS.Navigation.navigate("/pages/split/split.html", { groupKey: groupKey });
            },
    
            selectionChanged: function (eventInfo) {
               outputParagraph.innerText = lView.selection.count(); 
            }
    
        });
    })();


    • Edited by Shnabr Wednesday, March 26, 2014 1:58 AM
    Wednesday, March 26, 2014 1:58 AM
  • Thanks for you code, may I know where you get the error? and what is the error information

    Firstly look into your code, I doubt if you set a wrong parameter, the querySelector target seems not to be a listview item id. You can set a breakpoint here to see if the lView here is a WinJS ListView.

    lView = element.querySelector("#itemslist win-selectionstylefilled").winControl;

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.




    Wednesday, March 26, 2014 2:03 AM
    Moderator
  • I am pretty new to Javascript, that's why i'm making stupid errors. I would like to target the class name of my Listview, is that possible ? You're right this is the problem.

    Wednesday, March 26, 2014 2:07 AM
  • I would recommend you to set a id for you listview (any reason to use class instead of id?), for instance "myListview", then you can use the code like:

    lView = element.querySelector("#myListview").winControl;

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 26, 2014 2:15 AM
    Moderator
  • It works fine ;)

    And now how can i just change the selectionchanged function to get the value of my item and displays it on my flyout which is located in my default.html file ?

    (function () {
        "use strict";
    
        var ui = WinJS.UI;
        var lView;
        var outputParagraph;
    
        ui.Pages.define("/pages/items/items.html", {
            // This function is called to initialize the page.
            init: function (element, options) {
                this.itemInvoked = ui.eventHandler(this._itemInvoked.bind(this));
            },
    
            // This function is called whenever a user navigates to this page.
            ready: function (element, options) {
    
                lView = element.querySelector("#myListView").winControl;
                outputParagraph = element.querySelector("#DeliverFlyout");
                lView.addEventListener("selectionchanged", this.selectionChanged); 
    
                
            },
    
            // This function updates the page layout in response to layout changes.
            updateLayout: function (element) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in layout.
            },
    
            _itemInvoked: function (args) {
                var groupKey = Data.groups.getAt(args.detail.itemIndex).key;
                WinJS.Navigation.navigate("/pages/split/split.html", { groupKey: groupKey });
            },
    
            selectionChanged: function (eventInfo) {
                outputParagraph.innerText = lView.selection.value; 
            }
    
        });
    })();
    

    Wednesday, March 26, 2014 2:38 AM
  • Then you have to get a specific control in your ISelection collection by using getItems, read the value from the specific control and display it on your flyout. I did not see your datatemplate so I cannot tell how but I think it could be a easy thing.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, March 26, 2014 2:55 AM
    Moderator
  • Ok well i know how to put this value into my flyout but don't find how to get the title of my listviw slected item with getitems.

    (function () {
        "use strict";
    
        var ui = WinJS.UI;
        var lView;
        var lViewSelection;
        var outputParagraph;
        var itemsNumber;
    
        ui.Pages.define("/pages/items/items.html", {
            // This function is called to initialize the page.
            init: function (element, options) {
                this.itemInvoked = ui.eventHandler(this._itemInvoked.bind(this));
            },
    
            // This function is called whenever a user navigates to this page.
            ready: function (element, options) {
    
                lView = element.querySelector("#myListView").winControl;
                outputParagraph = element.querySelector("#workshopValue");
                lView.addEventListener("selectionchanged", this.selectionChanged);
                document.getElementById('appbar').winControl.hideCommands([deliver, deleteworkshop, workshopsSep, goldIamgesSep]);
            },
    
            // This function updates the page layout in response to layout changes.
            updateLayout: function (element) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in layout.
            },
    
            _itemInvoked: function (args) {
                var groupKey = Data.groups.getAt(args.detail.itemIndex).key;
                WinJS.Navigation.navigate("/pages/split/split.html", { groupKey: groupKey });
            },
    
            selectionChanged: function (eventInfo) {
                lViewSelection = lView.selection;
                itemsNumber = lViewSelection.count();
                if (itemsNumber == 1) {
                    document.getElementById('appbar').winControl.show();
                    document.getElementById('appbar').winControl.showCommands([deliver, deleteworkshop, workshopsSep, goldIamgesSep]);
                    lViewSelection.getItems().done(outputParagraph.value = /* ? */);
                }
                else
                    document.getElementById('appbar').winControl.hideCommands([deliver, deleteworkshop, workshopsSep, goldIamgesSep]);
            }
    
        });
    })();
    

    Wednesday, March 26, 2014 3:32 AM
  • Hi Shnabr,

    "How to get the title of listview selected item", in which control you put the title words? You should really find that control first. Let's say if you have only one text item in the DataTemplate, we can use something like below

    lViewSelection.getItems().done(function(items){var item = items[0];});

    Try to modify the code to fit your situation, hope it helps.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 26, 2014 8:54 AM
    Moderator
  • if (itemsNumber == 1) {
                    document.getElementById('appbar').winControl.show();
                    document.getElementById('appbar').winControl.showCommands([deliver, deleteworkshop, workshopsSep, goldIamgesSep]);
                    lViewSelection.getItems().done(outputParagraph.value = items[0].data.title);
                }
    

    Thank you Jamles, i finally understand how to do it.

    • Edited by Shnabr Wednesday, April 2, 2014 11:06 AM
    • Marked as answer by Shnabr Wednesday, April 2, 2014 11:06 AM
    Wednesday, March 26, 2014 2:58 PM