Difference between revisions of "TreeView Options"

From Lianjapedia
Jump to: navigation, search
(Notes on Client Support)
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]]
  
==TreeView Section==
+
==example_treeview App==
 
+
The example_treeview sample App demonstrates the use of a TreeView Section.
[[{{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.
+
 
+
[[{{ns:file}}:treeview2.png|450px|thumb|left|link={{filepath:treeview2.png}}|TreeView Section]]
+
 
+
 
+
 
+
  
 
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>
 
[[{{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.
 
Note: the database and table are specified in the Details at the top of the Section Attributes.
 
<br clear=all>
 
  
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
Line 46: Line 36:
 
|-
 
|-
 
|}
 
|}
 
[[{{ns:file}}:treeview4.png|450px|thumb|left|link={{filepath:treeview4.png}}|TreeView Section]]
 
 
 
 
  
 
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>
 
[[{{ns:file}}:treeview6.png|450px|thumb|left|link={{filepath:treeview6.png}}|TreeView Section: Filter]]
 
 
 
 
  
 
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|450px|thumb|left|link={{filepath:treeview6.png}}|TreeView Section: Filter]]
 
<br clear=all>
 
<br clear=all>
  
[[{{ns:file}}:treeview5.png|450px|thumb|left|link={{filepath:treeview5.png}}|TreeView Section: Form Section Search field]]
+
==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

Revision as of 10:55, 12 April 2024

Overview

TreeView Sections are data-bound tree grids that allow you to drill down through levels of hierarchical nodes.

See Also

TreeView Section Attributes

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.

TreeView Section


Attributes

The TreeView Options in the Section Attributes define the data and organization for the TreeView.

TreeView Section: Section Attributes


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.

TreeView Section


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.

TreeView Section: Filter


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.

TreeView Section: Form Section Search field


Notes on Client Support

Attribute Notes
Title -
Key -
Group By -
Filter -
Double Click Delegate -