#1262 closed enhancement (fixed)
[patch][cla] RepeaterContainer - implemented
Reported by: | Owned by: | dylan | |
---|---|---|---|
Priority: | high | Milestone: | |
Component: | Widgets | Version: | 0.3 |
Keywords: | Form, Repeater, RepeaterContainer | Cc: | [email protected]… |
Blocked By: | Blocking: |
Description
I was working on my FormContainer? and I got this idea, which would perhaps make creating Forms easier in dojo in some cases.
Let's call it Repeater for now.
Here is example form: It's a form of a person and it can include it's children in it. So it will have basic info like, name and age.. but then it will also have 0->n children info in it, including, say name and age.
What would developer want, well first of all, "Add new child" button which would add new child to form. And perhaps also "delete child" button to delete some child. And also what would be nice to have "move up/down" buttons. And after that, it would be super cool to just "DnD" those rows to right places. Ok, there is more than few lines to code.
Here is where repeater would come to the rescue. Idea would be something like this:
HTML:
<tr dojoType="Repeater" id="myRepeater" name="children"> <td>Name:</td><td><input name="name" type="text" /></td> <td>Age:</td><td><input name="age" type="text" /></td> <td>[image buttons for delete/move up/move down]</td> </tr> <tr> <input type="Add new child" name="myChildCreator" /> </tr>
Javascript:
var myRepeater=dojo.widget.byId("myRepeater"); var myRepeaterAddButton=dojo.byId("myChildCreator"); dojo.event.connect(myRepeaterAddButton,"onClick",myRepeater,"addRow");
Result :
<tr> <td>Name:</td><td><input name="children.0.name" type="text" /></td> <td>Age:</td><td><input name="children.0.age" type="text" /></td> <td>[image buttons for delete/move up/move down]</td> </tr> <tr> <td>Name:</td><td><input name="children.1.name" type="text" /></td> <td>Age:</td><td><input name="children.1.age" type="text" /></td> <td>[image buttons for delete/move up/move down]</td> </tr> <tr> <input type="Add new child" name="myChildCreator" /> </tr>
and for more complex stuff, this Javascript:
myFunction: function() { ... return myHTMLForNewRow; }, ... var myRepeater=dojo.widget.byId("myRepeater"); var myRepeaterAddButton=dojo.byId("myChildCreator"); dojo.event.connect(myRepeater,"addRow",this,"myFunction"); dojo.event.connect(myRepeaterAddButton,"onClick",myRepeater,"addRow");
And adding info through javascrpit would be easy too:
var myObject={name: "John Doe", age: "99"}; dojo.widget.byId("myRepeater").addRow(myObject);
This way it would be easier to create those kind of "repeaters".. Problematic things might be FormWidgets?, like DropDownDatePicker?.
Attachments (7)
Change History (19)
comment:1 Changed 15 years ago by
comment:2 Changed 15 years ago by
Milestone: | → 0.6 |
---|---|
Version: | → 0.3 |
comment:3 Changed 15 years ago by
Ok, so I managed to make somewhat working version. Here is test cases: http://joose.iki.fi/dojo/test-repeater.html (programmaticaly, more complex example too) http://joose.iki.fi/dojo/test-repeater2.html (in html-code)
Source code for this can be found from: http://joose.iki.fi/dojo/trunk/src/widget/RepeaterContainer.js
Current featurus:
- You can use repeatercontainer programmaticaly or by markup - You can easily bind events to some row-object: ie. <input type="button" rowFunction="onButtonClick" /> - You can easily add predefined actions to some objects (like delete): ie. <input type="button" rowAction="delete" /> - You can DnD rows to change their place/position - You can DnD rows away from list which is same as delete row
comment:4 Changed 15 years ago by
Keywords: | RepeaterContainer added |
---|---|
Summary: | Idea for a functionality/widget - Repeater → RepeaterContainer - implemented |
comment:5 Changed 15 years ago by
Milestone: | 0.6 → 0.5 |
---|
Changed 14 years ago by
Attachment: | RepeaterContainer.2.js added |
---|
Fixed a bug when creating row was done asynchronously
Changed 14 years ago by
Attachment: | RepeaterContainer.3.js added |
---|
RepeaterContainer? made synchronous and dnd optional and index-format is self assigned
comment:6 Changed 14 years ago by
Milestone: | 0.5 → 0.4 |
---|
Fixed repeater more:
- creating new row is now synchronous and onAddRow event is called - index-format is user definable.. so you could have like foo.%{index}.name or foo[%{index}].name or what ever you want - Dnd now is optional
comment:7 Changed 14 years ago by
Oh yes, and new format is like this:
<ol dojoType="RepeaterContainer" useDnd="true" index="child.%{index}"> <li><input type="text" name="child.%{index}.name" /></li> </ol>
Changed 14 years ago by
Attachment: | RepeaterContainer.4.js added |
---|
Fixed a bug and changed it to work in latest trunk without warnings
Changed 14 years ago by
Attachment: | RepeaterContainer.5.js added |
---|
Fixed bugs and made it work with RepeaterContainer? and support for latest trunk syntax.
comment:8 Changed 14 years ago by
Owner: | changed from bill to dylan |
---|---|
Status: | new → assigned |
Summary: | RepeaterContainer - implemented → [patch][cla] RepeaterContainer - implemented |
comment:9 Changed 14 years ago by
(In [5851]) references #1262, joose's RepeaterContainer? widget, first check-in... we need docs and a testcase, so marking experimental for now
comment:10 Changed 14 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Changed 14 years ago by
Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive
Changed 14 years ago by
Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive (now with tabs and not spaces)
Actually, the names of the input-elements should be in form of "children[INDEX]" for easy parsing and perhaps even support for some program languages.
Like: