locked
Using listbox or dropdown box in listview.

    Question

  • I am using listview to show some dynamic data.

    Its a kind of food ordering app so i need to show the name, description, price and a general dropdown list for selecting the quantity. 

    The quantity is selected by the user which ranges from 1-10. I need to add this listbox or dropdown in each cell of my listview.

    i am using:               <select id="qty" >

                                          <option value="1">1

                                          <option value="2">2

                                          <option value="3">3
                                                         </select> 

    but this doesn't works.

    I can show an example of windows 8 app which shows the same what i need to do. kindly help me with the code.


    deepanshu jaiswal monocept

    Thursday, December 20, 2012 8:24 AM

Answers

  • I got the answer here it is......

    we need to use selectedIndex:index.

    html:   

    <select class="win-interactive itemCount" id="dropdownlist" data-win-bind="selectedIndex:UserData.Index" >
                             <option>1</option>
                             <option>2</option>
                             <option>3</option>
                             <option>4</option>
                             <option>5</option>
                             <option>6</option>
                             <option>7</option>
                             <option>8</option>
                             <option>9</option>
                             <option>10</option>  

    </select>

    Javascript:   

                         WinJS.Namespace.define("ViewModel.UserData", {
                                    Index: null
                                       })

                          ViewModel.UserData.Index = 3;

    deepanshu jaiswal monocept

    • Marked as answer by roadie1000 Wednesday, December 26, 2012 8:57 AM
    Wednesday, December 26, 2012 8:57 AM

All replies

  • Hi,

    "This doesn't work" is not a lot of clarification in the issue :)
    Normally, the select element should work. Could you show how you're trying to add it to the listview? There might be issues there. One I can think of off the top of my head is that you're setting an ID for the select element inside a template which is used for all items, thus making all the select elements have the same ID.

    Hope this helps


    Please mark the best replies as answers
    Blog: bloggingabout.net/blogs/rick
    Twitter: @rickvdbosch

    Thursday, December 20, 2012 8:35 AM
  • thanks for the reply Rick.

    here is my code:

         

    HTML CODE

    <!-- binding for list of Menu_item_list   -->

              <div id="Menu_ItemList"></div>

          <div id="Menu_category" data-win-control="WinJS.Binding.Template" >
                <div id="Menu_details">            
                    <h3 data-win-bind="innerText: Itemname" ></h3>                
                    <h6 data-win-bind="innerText: ItemDscr"></h6>
                     <h4 data-win-bind="innerText:ItemPrce"></h4>    
                </div> 
                      <select id="qty" >
                          <option value="1">1
                          <option value="2">2
                          <option value="3">3
                    </select> 

                 </div>

    <!-- show listview for categories -->  
            <div id="basicListView" data-win-control="WinJS.UI.ListView" > </div>    

    JAVASCRIPT CODE:


                    function BindMenuListOfRest() {
                        
                       // document.getElementById("Menu_ItemList").innerHTML = "Menu";

                        WinJS.UI.process(element).then(function () {
                            var itemTemplate1 = element.querySelector("#Menu_category");

                            WinJS.UI.setOptions(listView1, {
                                itemDataSource: MenuItemDetail.itemList1.dataSource,
                                itemTemplate: itemTemplate1,
                                selectionMode: 'none',
                                tapBehavior: 'none',
                                layout: { type: WinJS.UI.GridLayout }
                             
                            });
                           
                        });


                    }

    On the mouse hover the whole list view is selected thus my listbox is not selected.

     

    deepanshu jaiswal monocept

    Thursday, December 20, 2012 8:58 AM
  • Hello Rick,

    i have replied the code i am using. i need to make a listview with three sections i.e Name, Price, Quantity. the quantity is user enabled and it can be changed by the user, the other two sections are dynamic data.

     in short i need to do this(image), could you please help me with the code review and feedback.


    deepanshu jaiswal monocept

    Monday, December 24, 2012 8:21 AM
  • I got the answer here it is......

    we need to use selectedIndex:index.

    html:   

    <select class="win-interactive itemCount" id="dropdownlist" data-win-bind="selectedIndex:UserData.Index" >
                             <option>1</option>
                             <option>2</option>
                             <option>3</option>
                             <option>4</option>
                             <option>5</option>
                             <option>6</option>
                             <option>7</option>
                             <option>8</option>
                             <option>9</option>
                             <option>10</option>  

    </select>

    Javascript:   

                         WinJS.Namespace.define("ViewModel.UserData", {
                                    Index: null
                                       })

                          ViewModel.UserData.Index = 3;

    deepanshu jaiswal monocept

    • Marked as answer by roadie1000 Wednesday, December 26, 2012 8:57 AM
    Wednesday, December 26, 2012 8:57 AM