Results 1 to 7 of 7
  1. rmxdave's Avatar
    Posts
    87 Posts
    Global Posts
    88 Global Posts
       #1  
    Hi all. I've been trying to set up a Drawer inside a list and I've been having some trouble.

    I have a List with results from an AJAX query and I want it so that when I tap on an item in the list, it will expand in size and give me detailed info about the result.

    Here's how I thought the itemTemplate should look:

    Code:
    <div class='result row' x-mojo-tap-highlight='momentary'>
    	<div class='title'>#{-title}</div>
    	<div class='url'>#{-url}</div>
    	
            <div id='resultDrawer' x-mojo-element="Drawer">
    		<div id='description'>Blah blah blah</div>
    	<div>
    </div>
    When I do that though, only the first Item shows up in the list and I can't get the Drawer to show or hide. How should this be set up? I've been looking for examples in the Sample Code but haven't found anything yet.

    Much thanks!
  2. #2  
    Have you downloaded the 'Style Matters' app? The source code for that has examples for drawers.
  3. rmxdave's Avatar
    Posts
    87 Posts
    Global Posts
    88 Global Posts
       #3  
    Yeah, they have a couple of examples but nothing with a drawer expanding inside of a list row. Thanks for the reply, though.
  4. #4  
    Dynamically name your drawer's "ID" and call setup widget for each unique drawer
  5. rmxdave's Avatar
    Posts
    87 Posts
    Global Posts
    88 Global Posts
       #5  
    Thanks I'll try that.
  6. krische's Avatar
    Posts
    421 Posts
    Global Posts
    442 Global Posts
    #6  
    Did anyone have some luck with this?

    It doesn't seem like my drawer widgets are being setup after I populate the list.
  7. Tibfib's Avatar
    Posts
    345 Posts
    Global Posts
    347 Global Posts
    #7  
    Here's how I do it:

    UPDATED. I found a way to do it without ids.

    Put this in your list item.
    Code:
    //Outerlist-item
    <div name="drawer"  x-mojo-element="Drawer">
       ...content...
    </div>
    You can setup your drawers if you want, you don't necessarily have to.
    I do, because I want the unstyled property. If you do set them up, do NOT include a model. The model is given by the list item. Also, you can run the setup function once.
    Code:
    this.controller.setupWidget("drawer", {unstyled: true});
    Then listen to listtap.
    Code:
    //changes the open property in the drawer
    event.item.open = !event.item.open
    this.controller.modelChanged(event.item);
    That should do it.
    Last edited by Tibfib; 11/30/2010 at 09:11 PM.

Tags for this Thread

Posting Permissions