Difference between revisions of "TreeView Options"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | ==Overview== | ||
+ | TreeView Sections are data-bound tree grids that allow you to drill down through levels of hierarchical nodes. | ||
+ | |||
==See Also== | ==See Also== | ||
[[TreeView Section Attributes]] | [[TreeView Section Attributes]] | ||
− | == | + | ==example_treeview App== |
− | + | The example_treeview sample App demonstrates the use of a TreeView Section. | |
− | + | ||
− | + | ||
− | + | ||
− | The | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
The App consists of one Page and two Sections. The top Section is a TreeView Section, the lower a Form Section (section4). | The App consists of one Page and two Sections. The top Section is a TreeView Section, the lower a Form Section (section4). | ||
Line 18: | Line 12: | ||
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. | ||
+ | [[{{ns:file}}:treeview2.png|800px|left|border|link={{filepath:treeview2.png}}|TreeView Section]] | ||
+ | <br clear=all> | ||
+ | ==Attributes== | ||
+ | The TreeView Options in the Section Attributes define the data and organization for the TreeView. | ||
+ | [[{{ns:file}}:treeview3.png|800px|left|border|link={{filepath:treeview3.png}}|TreeView Section: Section Attributes]] | ||
<br clear=all> | <br clear=all> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Note: the database and table are specified in the Details at the top of the Section Attributes. | Note: the database and table are specified in the Details at the top of the Section Attributes. | ||
− | |||
− | |||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
Line 46: | Line 36: | ||
|- | |- | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
Here is how the Attribute definitions relate to the data displayed. | Here is how the Attribute definitions relate to the data displayed. | ||
+ | [[{{ns:file}}:treeview4.png|800px|left|border|link={{filepath:treeview4.png}}|TreeView Section]] | ||
<br clear=all> | <br clear=all> | ||
− | |||
The double click event delegate for the TreeView Section has the following code: | The double click event delegate for the TreeView Section has the following code: | ||
Line 67: | Line 52: | ||
}; | }; | ||
</code> | </code> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
The example_treeview App does not have a '''Filter''' specified, but you can specify a condition to display only the matching records. | The example_treeview App does not have a '''Filter''' specified, but you can specify a condition to display only the matching records. | ||
Line 77: | Line 57: | ||
For example, here I have restricted the TreeView to records where the country is 'Canada' or 'USA' using the [[INLIST()]] function. | For example, here I have restricted the TreeView to records where the country is 'Canada' or 'USA' using the [[INLIST()]] function. | ||
+ | [[{{ns:file}}:treeview6.png|800px|left|border|link={{filepath:treeview6.png}}|TreeView Section: Filter]] | ||
<br clear=all> | <br clear=all> | ||
− | + | ==Search Field== | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Note that to use [[SHOWDOCUMENT()|showdocument()]] with the '''search''' action, the Section being searched must have its '''Search field''' set. | Note that to use [[SHOWDOCUMENT()|showdocument()]] with the '''search''' action, the Section being searched must have its '''Search field''' set. | ||
− | |||
This is set in the Field Attributes for the key Field. | This is set in the Field Attributes for the key Field. | ||
+ | [[{{ns:file}}:treeview5.png|800px|left|border|link={{filepath:treeview5.png}}|TreeView Section: Form Section Search field]] | ||
<br clear=all> | <br clear=all> | ||
==Notes on Client Support== | ==Notes on Client Support== | ||
− | |||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
Line 105: | Line 81: | ||
|valign="top"|Filter||- | |valign="top"|Filter||- | ||
|- | |- | ||
− | |valign="top"|Double Click Delegate|| | + | |valign="top"|Double Click Delegate||- |
|- | |- | ||
|} | |} | ||
Line 111: | Line 87: | ||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
[[Category:Sections]] | [[Category:Sections]] | ||
+ | [[Category:WebView Based Sections]] |
Latest revision as of 10:56, 12 April 2024
Contents
Overview
TreeView Sections are data-bound tree grids that allow you to drill down through levels of hierarchical nodes.
See Also
example_treeview App
The example_treeview sample 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.
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.
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); };
The example_treeview App does not have a Filter specified, but you can specify a condition to display only the matching records.
For example, here I have restricted the TreeView to records where the country is 'Canada' or 'USA' using the INLIST() function.
Search Field
Note that to use showdocument() with the search action, the Section being searched must have its Search field set.
This is set in the Field Attributes for the key Field.
Notes on Client Support
Attribute | Notes |
---|---|
Title | - |
Key | - |
Group By | - |
Filter | - |
Double Click Delegate | - |