JqxTree: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:


== Description ==
== Description ==
jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.  
jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.
 
jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.


== Properties and Methods ==
== Properties and Methods ==


See the complete documentation at jqWidget's site:
This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtree/jquery-tree-getting-started.htm
 
== Example ==
== Example ==


<pre>
<pre>
Dim data, source, dataAdapter
Sub Main()
data = generatedata(50)     'generatedata is a function which returns grid data
  $("#Tree1").jqxTree(Tree1_settings)
source = {localdata: data, datatype: "array"}
End Sub
dataAdapter = new $.jqx.dataAdapter(source)
 
             
Function Tree1_onselect(event)
Grid1_settings.source = dataAdapter
  menuItemText=$(event.args.element).text()
Grid1_settings.columns = [ _
  console.log(menuItemText)
     { text: "First Name", dataField: "firstname", width: 100 }, _
End Function
     { text: "Last Name", dataField: "lastname", width: 100 }, _
 
    { text: "Product", dataField: "productname", width: 180 }, _
source = [ _
     { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
  { icon: "images/mailIcon.png", label: "Mail", expanded: True, items: [ _
     { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
     { icon: "images/calendarIcon.png", label: "Calendar" }, _
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
     { icon: "images/contactsIcon.png", label: "Contacts", selected: True } _
  ]}, _
  { icon: "images/folder.png", label: "Inbox", expanded: True, items: [ _
    { icon: "images/folder.png", label: "Admin" }, _
     { icon: "images/folder.png", label: "Corporate" }, _
    { icon: "images/folder.png", label: "Finance" }, _
     { icon: "images/folder.png", label: "Support" }, _
    { icon: "images/folder.png", label: "Drafts" }, _
    { icon: "images/folder.png", label: "Other" }, _
  ]}, _
  { icon: "images/notesIcon.png", label: "Notes" }, _
  { iconsize: 14, icon: "images/settings.png", label: "Settings" }, _
  { icon: "images/favorites.png", label: "Favorites" }, _
   ]
   ]
Tree1_settings.source=source
</pre>
</pre>


Line 30: Line 46:


See above.
See above.
[[Category:Language Reference]]
[[Category:jqWidgets]]
[[Category:Controls]]

Latest revision as of 17:20, 7 April 2016

Description

jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

Properties and Methods

This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.

Example

Sub Main()
  $("#Tree1").jqxTree(Tree1_settings)
End Sub

Function Tree1_onselect(event)
  menuItemText=$(event.args.element).text()
  console.log(menuItemText)
End Function

source = [ _
  { icon: "images/mailIcon.png", label: "Mail", expanded: True, items: [ _
    { icon: "images/calendarIcon.png", label: "Calendar" }, _
    { icon: "images/contactsIcon.png", label: "Contacts", selected: True } _
  ]}, _
  { icon: "images/folder.png", label: "Inbox", expanded: True, items: [ _
    { icon: "images/folder.png", label: "Admin" }, _
    { icon: "images/folder.png", label: "Corporate" }, _
    { icon: "images/folder.png", label: "Finance" }, _
    { icon: "images/folder.png", label: "Support" }, _
    { icon: "images/folder.png", label: "Drafts" }, _
    { icon: "images/folder.png", label: "Other" }, _
  ]}, _
  { icon: "images/notesIcon.png", label: "Notes" }, _
  { iconsize: 14, icon: "images/settings.png", label: "Settings" }, _
  { icon: "images/favorites.png", label: "Favorites" }, _
  ]

Tree1_settings.source=source

Output

See above.

Retrieved from "https://wiki.appstudio.dev/index.php?title=JqxTree&oldid=8116"