Getting Started with JavaScript TreeView

13 Sep 20235 minutes to read

Include Script and CSS

To get start with TreeView, create a new HTML file and add the required dependent CSS file as well as script files.

CSS file

External script files

Internal script files

File Description/Usage
ej.core.min.js

 Must be referred always before using all the JS controls.
ej.data.min.js

 Used to handle data operation and should be used while binding data to JS controls.
ej.treeview.min.js

 The TreeView main file
ej.checkbox.min.js

 Should be referred when using check box functionalities in TreeView.  
ej.draggable.min.js

 Should be referred when using drag option in TreeView.
ej.waitingpopup.min.js

 Should be referred when using load on demand in TreeView.

Above internal script files are usable only if TreeView control alone going to be used in application. Otherwise you can make use of ‘ej.web.all.min.js’ file which encapsulates all ‘ej’ components and frameworks in single file.

ej.web.all.min.js – includes all widgets (link about widgets details).

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

Initialize TreeView

A simple HTML file with required CSS and script reference added to create TreeView control

  • HTML
    • <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />

        <!-- style sheet for default theme(flat azure) -->

        <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-azure/ej.web.all.min.css"
            rel="stylesheet" />

        <!--scripts-->

        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

        <script src="http://cdn.syncfusion.com/28.1.33/js/web/ej.web.all.min.js"></script>

    </head>

    <body>

        <!-- add the unordered list element to create TreeView here-->

    </body>

    </html>

    TreeView can be created in two different ways.

    Converting UL into TreeView

    TreeView can be created using unordered hierarchical list as shown below

  • HTML
    • <!--unordered list to create TreeView-->

    <ul id="treeView">

        <li>Item 1

            <ul>

                <li>Item 1.1</li>

                <li>Item 1.2</li>

            </ul>

        </li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    Initialize TreeView from unordered list

  • JS
    • // creates TreeView from unordered list

        $(function () {

            $("#treeView").ejTreeView();

        });

    TreeView Using Data Binding

    Another way of creating TreeView is binding with the data source, you can bind local data source to create a TreeView as shown below code example.
    The beforeLoad event will be triggered before loading nodes into TreeView.
    Create the TreeView wrapper.

  • HTML
    • <!--create the TreeView wrapper-->

    <div id="treeView"></div>

    Initialize TreeView with local data source

  • JS
    • $(function () {

            // initialize and bind the TreeView with local data

            $("#treeView").ejTreeView({

                fields: {
                    dataSource: [

                    {

                        text: "Item 1",

                        child: [

                        { text: "Item 1.1" },

                        { text: "Item 1.2" }

                        ]

                    },

                    { text: "Item 2" },

                    { text: "Item 3" }

                    ]

                }

            });

        });