-<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="667754803c7007674f625a335f264b784765386b.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 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 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>