Difference between revisions of "TreeView Options"
From Lianjapedia
Yvonne.milne (Talk | contribs) (Created page with "''Under Construction'' [[{{ns:file}}:treeview1.png|450px|thumb|left|link={{filepath:treeview1.png}}|TreeView Section: example_treeview App]] The 'Lianja Treeview Demo' (ex...") |
Yvonne.milne (Talk | contribs) |
||
| Line 2: | Line 2: | ||
[[{{ns:file}}:treeview1.png|450px|thumb|left|link={{filepath:treeview1.png}}|TreeView Section: example_treeview App]] | [[{{ns:file}}:treeview1.png|450px|thumb|left|link={{filepath:treeview1.png}}|TreeView Section: example_treeview App]] | ||
| − | + | <br clear=all> | |
| − | + | ||
The 'Lianja Treeview Demo' (example_treeview) App demonstrates the use of a TreeView Section. | The 'Lianja Treeview Demo' (example_treeview) App demonstrates the use of a TreeView Section. | ||
| − | |||
| − | |||
[[{{ns:file}}:treeview2.png|450px|thumb|left|link={{filepath:treeview2.png}}|TreeView Section]] | [[{{ns:file}}:treeview2.png|450px|thumb|left|link={{filepath:treeview2.png}}|TreeView Section]] | ||
| Line 13: | Line 10: | ||
| − | The App consists of one Page and two Sections. The top Section is a TreeView Section, the lower a Form Section. | + | |
| + | The App consists of one Page and two Sections. The top Section is a TreeView Section, the lower a Form Section (section4). | ||
Clicking on the arrows (>) expands the TreeView. Double-clicking on a Company Name loads the details for that Customer in the Customers Form Section. | Clicking on the arrows (>) expands the TreeView. Double-clicking on a Company Name loads the details for that Customer in the Customers Form Section. | ||
| Line 21: | Line 19: | ||
<br clear=all> | <br clear=all> | ||
| − | [[{{ns:file}}:treeview3.png|450px|thumb|left|link={{filepath:treeview3.png}}|TreeView Section]] | + | [[{{ns:file}}:treeview3.png|450px|thumb|left|link={{filepath:treeview3.png}}|TreeView Section: Section Attributes]] |
| + | |||
| + | |||
| + | |||
| + | |||
| + | The TreeView Options in the Section Attributes define the data and organization for the TreeView. | ||
| + | |||
| + | Note: the database and table are specified in the Details at the top of the Section Attributes. | ||
<br clear=all> | <br clear=all> | ||
| + | |||
| + | {| class="wikitable" width="100%" | ||
| + | !width="20%"|Attribute | ||
| + | !width="80%"|Description | ||
| + | |- | ||
| + | |valign="top"|Title||The name of the column containing the title to be displayed for each leaf node of the tree. | ||
| + | |- | ||
| + | |valign="top"|Key||The key expression to be associated with the tree node. This will be passed as the second argument to the click or dblclick delegates. | ||
| + | |- | ||
| + | |valign="top"|Group By||A comma separated list of expressions that the tree will be organized by. | ||
| + | |- | ||
| + | |valign="top"|Filter||The filter expression that restricts which records will be included in the tree | ||
| + | |- | ||
| + | |} | ||
[[{{ns:file}}:treeview4.png|450px|thumb|left|link={{filepath:treeview4.png}}|TreeView Section]] | [[{{ns:file}}:treeview4.png|450px|thumb|left|link={{filepath:treeview4.png}}|TreeView Section]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | Here is how the Attribute definitions relate to the data displayed. | ||
<br clear=all> | <br clear=all> | ||
| − | [[{{ns:file}}:treeview5.png|450px|thumb|left|link={{filepath:treeview5.png}}|TreeView Section]] | + | |
| + | The double click event delegate for the TreeView Section has the following code: | ||
| + | |||
| + | <code lang="recital"> | ||
| + | //////////////////////////////////////////////////////////////// | ||
| + | // Event delegate for 'dblclick' event | ||
| + | function page1_section1_dblclick(title, key) | ||
| + | { | ||
| + | Lianja.showDocument("page:page1.section4?action=search&text="+key); | ||
| + | }; | ||
| + | </code> | ||
| + | |||
| + | [[{{ns:file}}:treeview5.png|450px|thumb|left|link={{filepath:treeview5.png}}|TreeView Section: Form Section Search field]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | Note that to use [[SHOWDOCUMENT()|showdocument()]] with the '''search''' action, the Section being searched must have its '''Search field''' set. | ||
<br clear=all> | <br clear=all> | ||
| + | |||
| + | |||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
Revision as of 13:16, 17 March 2015
Under Construction
The 'Lianja Treeview Demo' (example_treeview) App demonstrates the use of a TreeView Section.
The App consists of one Page and two Sections. The top Section is a TreeView Section, the lower a Form Section (section4).
Clicking on the arrows (>) expands the TreeView. Double-clicking on a Company Name loads the details for that Customer in the Customers Form Section.
The TreeView Options in the Section Attributes define the data and organization for the TreeView.
Note: the database and table are specified in the Details at the top of the Section Attributes.
| Attribute | Description |
|---|---|
| Title | The name of the column containing the title to be displayed for each leaf node of the tree. |
| Key | The key expression to be associated with the tree node. This will be passed as the second argument to the click or dblclick delegates. |
| Group By | A comma separated list of expressions that the tree will be organized by. |
| Filter | The filter expression that restricts which records will be included in the tree |
Here is how the Attribute definitions relate to the data displayed.
The double click event delegate for the TreeView Section has the following code:
//////////////////////////////////////////////////////////////// // Event delegate for 'dblclick' event function page1_section1_dblclick(title, key) { Lianja.showDocument("page:page1.section4?action=search&text="+key); };
Note that to use showdocument() with the search action, the Section being searched must have its Search field set.
