<?xml version="1.0" encoding="ISO-8859-1"?><page xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
      
  
  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    

    
    

    
    

    
    

    
    
    
    
    

    
    
    
    
    


    
    
    
    
    
    

    
    
    
    
    

  <fi:init xmlns:bu="http://apache.org/cocoon/browser-update/1.0">
	<script type="text/javascript">
	  // Uncomment this to see Dojo debug
	  // var djConfig = { isDebug: true };
	
    </script>	
  </fi:init>
  <h4 class="samplesGroup">Repeater widget with advanced interaction</h4>
  <title>Repeater widget with advanced interaction</title>
  <style type="text/css">
    .forms-row td {
       padding: 5px;
    }

    /* Ensure the inline edit is visible on selected rows */
    .forms-row-selected .editableRegion {
       color: black;
    }
  </style>
  
  <content>
    
      
      
        <fi:form-template ajax="true" action="74282e7d25247e656f465c57122a251032337112.continue" method="POST">
        
        
        
    
    <p>This example expands on the <a href="do-dynaRepeater.flow">dynamic repeater sample</a> and uses
       <a href="http://dojotoolkit.org">Dojo</a> to provide additional interaction features.
       After adding rows in the repeater below you will be able to:</p>
    <ul>
      <li>reorder rows using drag-and-drop,</li>
      <li>select and deselect rows by clicking anywhere rather than in a checkbox,</li>
      <li>use in-place editing (an input appears when you click on the text).</li>
    </ul>
      <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="contacts">
        
        
        
        <div dojoType="CFormsRepeater" orderable="true" select="select">
        

            <table border="1">
              <tr>
                <th width="300">Firstname
    </th>
                <th width="300">Lastname
    </th>
                <th>ID
    </th>
              </tr>
              <tbody>
                  
                  
          <bu:replace id="contacts.0">
            
            
                    <tr class="forms-row">
                      <td><bu:replace id="contacts.0.firstname">
        
        <fi:field id="contacts.0.firstname" state="active" required="false"><fi:styling type="inplace" submit-on-change="true"/><fi:hint>First name</fi:hint><fi:label>Firstname</fi:label><fi:datatype type="string"/>
        
        </fi:field></bu:replace>
      
    </td>
                      <td><bu:replace id="contacts.0.lastname">
        
        <fi:field id="contacts.0.lastname" state="active" required="false"><fi:styling type="inplace"/><fi:hint>Last name</fi:hint><fi:label>Lastname</fi:label><fi:datatype type="string"/>
        
        </fi:field></bu:replace>
      
    
		              </td>
                      <td><bu:replace id="contacts.0.ID">
        
        <fi:output id="contacts.0.ID" state="active"><fi:label>ID</fi:label><fi:value>1</fi:value>
        
        </fi:output></bu:replace>
      
    
                        <bu:replace id="contacts.0.select">
        
        <fi:booleanfield id="contacts.0.select" state="active" true-value="true"><fi:label>Select</fi:label><fi:value>false</fi:value>
        
	                      <fi:styling style="display: none"/>
	                    
        </fi:booleanfield></bu:replace>
      
    
                      </td>
                    </tr>
                  
            </bu:replace>
          
        
    
                </tbody>
            </table>
                
             <p>
                  <bu:replace id="addcontact">
        
        <fi:action id="addcontact" state="active"><fi:label>Add contact</fi:label>
        
        </fi:action></bu:replace>
      
    
                  
                    <bu:replace id="removecontacts">
        
        <fi:action id="removecontacts" state="active"><fi:label>Remove selected contacts</fi:label>
        
        </fi:action></bu:replace>
      
    
                  
              </p>
              </div>
            
        </bu:replace>
      
    
            <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="ok">
        
        <fi:action id="ok" state="active"><fi:label>Submit</fi:label>
        
        </fi:action></bu:replace>
      
    <br/>
            <a href="./do-dojoRepeater.flow">Restart this sample</a> - <a href="./">Back to samples</a>

    
        </fi:form-template>
      
    
  </content>
</page>