locked
I need to be able to get <input> tags working in an itemTemplate bound to a Listview!!

    Question

  • However, I can't get this to happen. If I stick a <input> tag inside a <body> , it works fine, but if i wrap it in an itemTemplate that's referred to by the listview tag, it loses editability, and unable to give it focus.However, it stil picks up values. ANY sample on getting a <input> tag working in a listview/itemTemplate ? or snippet that you know works? Much appreciated!!
    Friday, February 24, 2012 4:28 PM

Answers

  • Hi Vxxxxx,

    The debugger is your friend!  I was able to trace in and see why focus was being set to the div and not the input.  If the input class is set to win-interactive, then this will allow you to place focus on the input field:

     <div id="itemTemplate" data-win-control="WinJS.Binding.Template" >
            <div>
                <!-- Displays the "picture" field. -->
                <div >
                    <input class="win-interactive"  id="Text1" type="text" />
                </div>
                
    
                <!-- Displays the "title" field. -->
                <div data-win-bind="innerText: title">
                </div>
    
                <!-- Displays the "description" field.  -->
                <div data-win-bind="innerText: description">
                </div>
            </div>
        </div>
    
        
         
         <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{crossSlide: 'none', tap: 'none', selectionmode: 'none', itemRenderer: itemTemplate, layout: {type: WinJS.UI.ListLayout}}">
        </div>

    -Jeff

    Jeff Sanders (MSFT)

    Monday, February 27, 2012 3:49 PM
    Moderator

All replies

  • Hi Vxxxxx,

    The debugger is your friend!  I was able to trace in and see why focus was being set to the div and not the input.  If the input class is set to win-interactive, then this will allow you to place focus on the input field:

     <div id="itemTemplate" data-win-control="WinJS.Binding.Template" >
            <div>
                <!-- Displays the "picture" field. -->
                <div >
                    <input class="win-interactive"  id="Text1" type="text" />
                </div>
                
    
                <!-- Displays the "title" field. -->
                <div data-win-bind="innerText: title">
                </div>
    
                <!-- Displays the "description" field.  -->
                <div data-win-bind="innerText: description">
                </div>
            </div>
        </div>
    
        
         
         <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{crossSlide: 'none', tap: 'none', selectionmode: 'none', itemRenderer: itemTemplate, layout: {type: WinJS.UI.ListLayout}}">
        </div>

    -Jeff

    Jeff Sanders (MSFT)

    Monday, February 27, 2012 3:49 PM
    Moderator
  • Well, how do i use the debugger when i don't know what to look for,no documentation
    Thursday, March 1, 2012 11:07 AM
  • I agree, even with the demos, i don't know where to look for.

    Desenvolvedor com ênfase em qualidade de código e performance. MCP - MCTS - Partner

    Sunday, March 3, 2013 10:27 PM