|
animationShowDuration
|
number
|
350
|
Sets or gets the animationShowDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,animationShowDuration:1000, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
animationHideDuration
|
number
|
fast
|
Sets or gets the animationHideDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,animationHideDuration:1000, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
allowDrag
|
boolean
|
false
|
Sets or gets the allowDrag property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,allowDrop:true,allowDrag:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
allowDrop
|
boolean
|
false
|
Sets or gets the allowDrop property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,allowDrop:true,allowDrag:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
checkboxes
|
boolean
|
false
|
Sets or gets the checkboxes property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,checkboxes:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
dragStart
|
function
|
null
|
Sets or gets the dragStart property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, dragStart: "dragStart", theme:"light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
dragEnd
|
function
|
null
|
Sets or gets the dragEnd property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, dragEnd: "dragEnd", theme:"light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,disabled:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
easing
|
string
|
'easeInOutCirc'
|
Sets or gets the easing property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, easing: "easeInOutCirc", theme:"light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
enableHover
|
boolean
|
true
|
Sets or gets the enableHover property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,enableHover:false, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,height:300, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
hasThreeStates
|
boolean
|
false
|
Sets or gets the hasThreeStates property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,hasThreeStates:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
incrementalSearch
|
boolean
|
true
|
Sets or gets the incrementalSearch property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,incrementalSearch:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
keyboardNavigation
|
boolean
|
true
|
Sets or gets the keyboardNavigation property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,keyboardNavigation:false, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,rtl:true, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
selectedItem
|
object
|
null
|
Sets or gets the selectedItem property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, selectedItem: "selectedItem", theme:"light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
source
|
object
|
null
|
Sets or gets the source property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:source, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
toggleIndicatorSize
|
number
|
16
|
Sets or gets the toggleIndicatorSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data,toggleIndicatorSize:20, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
toggleMode
|
string
|
dblclick
|
Sets or gets the toggleMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, toggleMode: "click", theme:"light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
|
|
added
|
Event
|
|
Code examples
Bind to the added event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("added", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
checkChange
|
Event
|
|
Code examples
Bind to the checkChange event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("checkChange", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
collapse
|
Event
|
|
Code examples
Bind to the collapse event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("collapse", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
dragStart
|
Event
|
|
Code examples
Bind to the dragStart event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("dragStart", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
dragEnd
|
Event
|
|
Code examples
Bind to the dragEnd event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("dragEnd", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
expand
|
Event
|
|
Code examples
Bind to the expand event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("expand", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
initialized
|
Event
|
|
Code examples
Bind to the initialized event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("initialized", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
itemClick
|
Event
|
|
Code examples
Bind to the itemClick event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("itemClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
removed
|
Event
|
|
Code examples
Bind to the removed event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("removed", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
select
|
Event
|
|
Code examples
Bind to the select event of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { source:data, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree").addEventListener("select", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
|
|
addBefore
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| id |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").addBefore( 'item',1); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
addAfter
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| id |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").addAfter( 'item','item2'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
addTo
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| id |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").addTo( 'item','parentItem'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
clear
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").clear(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
checkAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").checkAll(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
checkItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| checked |
boolean |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").checkItem( 'item',true); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
collapseAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").collapseAll(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
collapseItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").collapseItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").destroy(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
disableItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").disableItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
ensureVisible
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").ensureVisible( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
enableItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").enableItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
enableAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").enableAll(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
expandAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").expandAll(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
expandItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").expandItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
focus
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").focus(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getCheckedItems
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getCheckedItems(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getUncheckedItems
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getUncheckedItems(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getItems
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getItems(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getItem
|
Method
|
|
| Parameter |
Type |
Description |
| element |
string |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").getItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getSelectedItem
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getSelectedItem(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getPrevItem
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getPrevItem(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
getNextItem
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").getNextItem(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
hitTest
|
Method
|
|
| Parameter |
Type |
Description |
| left |
number |
|
| top |
number |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").hitTest(100,100); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
removeItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").removeItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").render(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").refresh(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
selectItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").selectItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
uncheckAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").uncheckAll(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
uncheckItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").uncheckItem( 'item'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
updateItem
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| newItem |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree").updateItem( 'item','newItem'); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
string |
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var data = [ { 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: "Other" }, ] }, { icon: "../../images/recycle.png", label: "Deleted Items" }, { icon: "../../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../../images/settings.png", label: "Settings" }, { icon: "../../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings[ "treeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree").val(); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree>
|
