jQWidgets jqxTree source Property

Last Updated : 30 Sep, 2021

jQWidgets is a JavaScript framework for making web-based applications for pc and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTree represents a jQuery widget that is used to display a hierarchical collection of items. To display the collection of items, we can populate from ‘UL’ or by using its ‘source’ property.

The source property is used to set or return the item’s source. It accepts object type value and its default value is null.

The tree item has the following fields.

label: It represents the label of item.
value: It represents the value of item.
html: It represents the HTML item
id: It represents the id of the item.
disabled: It represents whether the item is enabled/disabled.
checked: It represents whether the item is checked/unchecked.
expanded: It represents whether the widget item is expanded or collapsed.
selected: It represents whether the item is selected.
items: It represents an array of sub-items.
icon: It represents the item’s icon.
iconsize: It represents the size of the item’s icon.

Syntax:

$('selector').jqxTree({ source: Object_data });

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.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/jqxtree.js”></script>

The below example illustrates the jQWidgets jqxTree source property.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.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/jqxtree.js"></script> 
  
    <style> 
        h1, 
        h3 { 
            text-align: center; 
        } 
          
        #jqxTree { 
            width: 100%; 
            margin: 0 auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxTree source Property 
    </h3> 
  
    <div id='jqxTree'></div> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
  
            var data = [{ 
                label: "GeeksforGeeks", 
                expanded: true, 
                items: [{ 
                    label: "Computer Science" 
                }] 
            }, { 
                label: "Programming", 
                expanded: true, 
                items: [{ 
                    label: "C" 
                }, { 
                    label: "C++" 
                }, { 
                    label: "Java" 
                }, { 
                    label: "Python" 
                }, ] 
            }, { 
                label: "Web Technology", 
                items: [{ 
                    label: "HTML" 
                }, { 
                    label: "CCSS" 
                }, { 
                    label: "JavaScript" 
                }, { 
                    label: "jQuery" 
                }, { 
                    label: "PHP" 
                }] 
            }]; 
  
            $('#jqxTree').jqxTree({ 
                source: data, 
                width: '350px', 
                height: '250px' 
            }); 
        }); 
    </script> 
</body> 
  
</html>