Es5 getting started in EJ2 JavaScript Drop down tree control

13 Dec 202418 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework that can be directly used in the latest web browsers.

Dependencies

The following list of dependencies are required to use the Dropdown Tree control in your application.

|-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons

Control Initialization

The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.

  • Using local script and style references in a HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create an app folder myapp for Essential JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-dropdowns/styles/material.css

Step 3: Create a folder myapp/resources and copy or paste the global scripts and styles from the above installed location to the myapp/resources location.

Step 4: Create a HTML page (index.html) in myapp location and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Dropdown Tree's dependent scripts -->
            <script src="resources/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="resources/ej2-lists.min.js" type="text/javascript"></script>
            <script src="resources/ej2-popups.min.js" type="text/javascript"></script>
            <script src="resources/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="resources/ej2-buttons.min.js" type="text/javascript"></script>
            <!-- Essential JS 2 Dropdown Tree's global script -->
            <script src="resources/ej2-dropdowns.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Step 5: Now, add the input element and initiate the Essential JS 2 Dropdown Tree control in the index.html by using the following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Dropdown Tree's dependent scripts -->
            <script src="resources/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="resources/ej2-lists.min.js" type="text/javascript"></script>
            <script src="resources/ej2-popups.min.js" type="text/javascript"></script>
            <script src="resources/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="resources/ej2-buttons.min.js" type="text/javascript"></script>
            <!-- Essential JS 2 Dropdown Tree's global script -->
            <script src="resources/ej2-dropdowns.min.js" type="text/javascript"></script>
       </head>
      <body>
           <!-- Add the HTML <input> element  -->
             <input type="text" id='ddltreeelement' />
            <script>
            // initialize Dropdown Tree control
            var dropDownTreeObj = new ej.dropdowns.DropDownTree();
            // Render initialized Dropdown Tree.
            dropDownTreeObj.appendTo('#ddltreeelement');
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Essential JS 2 Dropdown Tree control.

Step 1: Create an app folder myapp for the Essential JS 2 JavaScript controls.

Step 2: The Essential JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js

Styles: http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css

Step 3: Create a HTML page (index.html) in myapp location and add the CDN link references. Now, add the input element and initiate the Essential JS 2 Dropdown Tree control in the index.html by using the following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
<!-- Essential JS 2 Dropdown Tree's dependent material theme -->
            <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 all script -->
            <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->

            <!-- Essential JS 2 Dropdown Tree's dependent scripts -->
            <script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
            <script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
       </head>
       <body>
           <!-- Add the HTML <input> element  -->
             <input type="text" tabindex="1" id='ddtreeelement' />
            <script>
            // initialize Dropdown Tree control
            var dropDownTreeObj = new ej.dropdowns.DropDownTree();
            // Render initialized Dropdown Tree.
            dropDownTreeObj.appendTo('#ddtreeelement');
            </script>
       </body>
  </html>

Step 4: Now, run the index.html in web browser, it will render the Essential JS 2 Dropdown Tree control.

Binding data source

The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the dataSource property that is a member of the fields property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree control.

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 Dropdown Tree's dependent material theme -->
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet">
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
            <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">

            <!-- Essential JS 2 all script -->
            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

       <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>

            <div id="container" style="margin:0 auto; width:250px;">
           <!-- Add the HTML <input> element  -->
             <input type="text" tabindex="1" id="ddtreeelement">
             </div>
            <script>
            //define the array of JSON
               var data = [
               {
                    nodeId: '01', nodeText: 'Music',
                    nodeChild: [
                         { nodeId: '01-01', nodeText: 'Gouttes.mp3' }
                    ]
               },
               {
                    nodeId: '02', nodeText: 'Videos', expanded: true,
                    nodeChild: [
                         { nodeId: '02-01', nodeText: 'Naturals.mp4' },
                         { nodeId: '02-02', nodeText: 'Wild.mpeg' },
                    ]
               },
               {
                    nodeId: '03', nodeText: 'Documents',
                    nodeChild: [
                         { nodeId: '03-01', nodeText: 'Environment Pollution.docx' },
                         { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx' },
                         { nodeId: '03-03', nodeText: 'Global Warming.ppt' },
                         { nodeId: '03-04', nodeText: 'Social Network.pdf' },
                         { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf' },
                    ]
               }];

               // initialize Dropdown Tree control
               var DropDownTreeObject = new ej.dropdowns.DropDownTree({
               //binding data source through fields property
               fields: { dataSource: data, value: 'nodeId', text: 'nodeText', child: 'nodeChild' }
               });
               // render initialized Dropdown Tree
               DropDownTreeObject.appendTo('#ddtreeelement');
               </script>
       
  <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>