# # Tree Component

The Tree Component is a powerful UI component that integrates functionalities such as selection, dragging, editing, and lazy loading. This section will introduce how to create a tree component and the usage of its key interfaces and events through examples.

The article will involve some APIs and event names of the Tree Component. For related information, please refer to the API Reference as below:

> TreeComponent
> (opens new window) TreeNodeComponent
> (opens new window) TreeNodeData
> (opens new window)

## # Getting Started

### # Create a Tree Component

As the code snippet below shows, you can create a Tree Component by using the `<tree>` tag in the template. The Tree Component supports three attributes:

1. `draggable`: Indicates whether the dragging feature is enabled. It is disabled by default. Once enabled, tree nodes can be dragged onto other tree nodes, triggering the `dragend` event.

2. `editable`: Indicates whether the editing feature is enabled. It is disabled by default. Once enabled, the text on the tree nodes can be edited by double-clicking, and the `confirm-edit` event is triggered upon hitting enter to confirm the update.

3. `lazy-mode`: Represents the mode for lazy loading child nodes. The default is `"none"`, which indicates that delayed loading is not enabled. When set to `"passive"`, child nodes are only created and rendered when they are within the visible area, which can improve performance when there are a large number of child nodes.

    <tree
        draggable="true"
        editable="true"
        lazy-mode="passive"
    ></tree>

### # Display Data in the Tree Component

The previous example code simply creates a tree component and does not display any content, as no data is provided. There are two ways to display data in the tree component:

1. Use the `@setter.data="expression"` directive in the component template to specify the data binding relationship. The result returned by the expression will be used for the tree component's data display.

2. Update the data of the tree component through the `[TreeComponent.setData]` API.

Please note that these two methods cannot be used simultaneously to avoid unexpected results due to synchronization order issues.

Below are two examples of tree components demonstrated separately by directive and `setData`, please click `run` to execute:

1. Display data using the `@setter.data` directive:

       <html>
           <div id="pdf-ui"></div>
           <template id="layout-template">
               <webpdf class="custom-webpdf-container">
                   <my-tree class="my-tree-container"></my-tree>
                   <viewer style="flex: 1"></viewer>
               </webpdf>
           </template>
       </html>
       <style>
           html{
               overflow:hidden;
           }
           body {
               height: 100vh;
           }
           #pdf-ui {
               position: relative;
               top: 50px;
           }
           .custom-webpdf-container {
               display: flex;
               flex-direction: row;
           }
           .my-tree-container {
               width: 200px;
               border-right: 1px solid #ddd;
               overflow-y: scroll;
           }
       </style>
       <script>
           class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
               template: `<div @var.my_tree="$component">
                   <tree
                       @setter.data="my_tree.treeData"
                   ></tree>
                   <xbutton @on.click="my_tree.handleClick()">Show More</xbutton>
               </div>`
           }) {
               static getName() {
                   return 'my-tree'
               }
               treeData = [{
                   title: 'First',
                   id: '1'
               }]
               handleClick() {
                   this.treeData = [{
                       title: 'First',
                       id: '1'
                   }, {
                       title: 'Second',
                       id: '2'
                   }, {
                       title: 'Third',
                       id: '3',
                       isLeaf: false,
                       children: [{
                           title: 'Fourth',
                           id: '4'
                       }]
                   }];
                   this.digest();
               }
           }

           UIExtension.modular.root().registerComponent(MyTreeComponent);

           const CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });
           const libPath = window.top.location.origin + '/lib';
           const pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: '#pdf-ui',
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

2. Display data using the `setData` API

       <html>
           <div id="pdf-ui"></div>
           <template id="layout-template">
               <webpdf class="custom-webpdf-container">
                   <my-tree class="my-tree-container"></my-tree>
                   <viewer style="flex: 1"></viewer>
               </webpdf>
           </template>
       </html>
       <style>
           html{
               overflow:hidden;
           }
           body {
               height: 100vh;
           }
           #pdf-ui {
               position: relative;
               top: 50px;
           }
           .custom-webpdf-container {
               display: flex;
               flex-direction: row;
           }
           .my-tree-container {
               width: 200px;
               border-right: 1px solid #ddd;
               overflow-y: scroll;
           }
       </style>
       <script>
           class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
               template: `<div @var.my_tree="$component">
                   <tree></tree>
                   <xbutton @on.click="my_tree.handleClick()">Show Tree Data</xbutton>
               </div>`
           }) {
               static getName() {
                   return 'my-tree'
               }
               handleClick() {
                   const tree = this.childAt(0);
                   tree.setData([{
                       title: 'First',
                       id: '1'
                   }, {
                       title: 'Second',
                       id: '2'
                   }, {
                       title: 'Third',
                       id: '3',
                       isLeaf: false,
                       children: [{
                           title: 'Fourth',
                           id: '4'
                       }]
                   }])
               }
           }

           UIExtension.modular.root().registerComponent(MyTreeComponent);

           const CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });
           const libPath = window.top.location.origin + '/lib';
           const pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: '#pdf-ui',
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

### # Create an editable tree

To create an editable tree, you need to set the `editable` attribute to `true` on the `<tree>` tag. This will allow the node name to be edited by double-clicking on the tree node text.

For example:

    <tree editable="true"></tree>

After enabling the editing feature, when the tree node text is double-clicked, it will trigger an `edit` event. You can make the node data editable by updating it in the event listener function.

Once the editing is complete, you can listen to the `confirm-edit` event to get the text edited by the user.

Example：

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    editable="true"
                    @setter.data="my_tree.treeData"
                    @on.confirm-edit="my_tree.onConfirmEdit($args[0])"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Second',
                id: '2'
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
            onConfirmEdit(event) {
                console.log(event.oldTitle, event.newTitle, event.nodeId);
            }
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

If you want to set a specific node to be uneditable, you can individually specify its data parameter `editable` as `false` in `treeData`.

Example：

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    editable="true"
                    @setter.data="my_tree.treeData"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Not editable',
                id: '2',
                editable: false
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

Please note that if you set the `editable` parameter of the tree component to `false`, you will not be able to individually specify whether a node is editable.

### # Create a draggable tree

To make the tree component draggable, you need to enable the `draggable` attribute on the `<tree>` component:

    <tree draggable="true"></tree>

In this way, you can drag tree nodes into other nodes. When the dragging ends, a `dragend` event will be triggered. Through the event parameters, you can obtain the data of the dragged node, the ID of the target node, and the relationship between nodes after dragging. Typically, at this point, the application needs to update the backend data based on this information.

Example：

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    draggable="true"
                    @setter.data="my_tree.treeData"
                    @on.dragend="my_tree.handleDragendEvent($args[0])"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Second',
                id: '2'
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
            handleDragendEvent(event) {
                console.log('On dragend event:', event)
            }
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

If you want to set a specific node to be non-draggable, you can individually specify its data parameter `draggable` as `false` in `treeData`.

Example：

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    draggable="true"
                    @setter.data="my_tree.treeData"
                    @on.dragend="my_tree.handleDragendEvent($args[0])"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Not draggable',
                id: '2',
                draggable: false
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
            handleDragendEvent(event) {
                console.log('On dragend event:', event)
            }
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

Please note that if the `draggable` of the tree component is specified as `false`, you will not be able to individually specify whether a node is draggable.

### # Selectable tree node

To make the tree nodes selectable, you need to enable the `selectable` attribute on the `<tree>` component:

    <tree selectable="true"></tree>

In this way, when a user clicks on a tree node, the `fv__ui-tree-node-selected` CSS class will be added to the node. The default appearance will not change, but your application can customize the appearance after selection. At the same time, the `select` event will be triggered.

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
        .fv__ui-tree-node-selected>.fv__ui-tree-node-wrapper {
            color: red;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    selectable="true"
                    @setter.data="my_tree.treeData"
                    @on.select="my_tree.handleSelectEvent($args[0])"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Second',
                id: '2',
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
            handleSelectEvent(nodeId) {
                console.log('On select event:', nodeId)
            }
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

If you want to specify a node as unselectable, you can individually set its data parameter `selectable` to `false` in `treeData`.

Example:

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
        .fv__ui-tree-node-selected>.fv__ui-tree-node-wrapper {
            color: red;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    selectable="true"
                    @setter.data="my_tree.treeData"
                    @on.select="my_tree.handleSelectEvent($args[0])"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'First',
                id: '1'
            }, {
                title: 'Not selectable',
                id: '2',
                selectable: false
            }, {
                title: 'Third',
                id: '3',
                isLeaf: false,
                children: [{
                    title: 'Fourth',
                    id: '4'
                }]
            }]
            handleSelectEvent(nodeId) {
                console.log('On select event:', nodeId)
            }
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

Please note that if the `selectable` of the tree component is specified as `false`, you will not be able to individually specify whether a node is selectable.

### # The states of the tree node

Tree nodes have the following states:

- `disabled`: Whether it is disabled or not, default is `false`. A disabled tree node cannot be edited, selected, or dragged.

- `activated`: Whether the subtree is expanded or not, default is `false`. If the node is a leaf node, setting this value will have no effect.

- `selected`: Whether it is selected or not, default is `false`. If the node is unselectable, setting this value will have no effect.

- `editing`: Whether editing is enabled or not, default is `false`. If the node is uneditable, setting this value will have no effect.

Example：

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
        .fv__ui-tree-node-selected>.fv__ui-tree-node-wrapper {
            color: red;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    selectable="true"
                    draggable="true"
                    editable="true"
                    @setter.data="my_tree.treeData"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'Selected',
                id: '1',
                selected: true
            }, {
                title: 'Editting',
                id: '2',
                editting: true
            }, {
                title: 'Expanded',
                id: '3',
                isLeaf: false,
                activated: true,
                children: [{
                    title: 'Sub node',
                    id: '4'
                }]
            }, {
                title: 'Disabled',
                id: '5',
                disabled: true,
            }]
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

### # Lazy Mode

Lazy mode does not refer to data delay, but rendering delay. Considering that there may be a large number of tree nodes, inserting too many DOM nodes into the browser at once can cause display stuttering. To address this, the tree component provides a lazy mode `lazy-mode="passive"`, which can display tree nodes as needed.

Example of using Lazy Mode:

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
        .fv__ui-tree-node-selected>.fv__ui-tree-node-wrapper {
            color: red;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    selectable="true"
                    draggable="true"
                    editable="true"
                    lazy-mode="passive"
                    @setter.data="my_tree.treeData"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'More than 10000+ Children',
                id: '1',
                isLeaf: false,
                children: Array(10000).fill(0).map((_,i) => {
                    return {
                        title: '' + (Date.now()+i).toString(26),
                        id: Date.now() + i
                    };
                })
            }];
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

Example without using Lazy Mode:

    <html>
        <div id="pdf-ui"></div>
        <template id="layout-template">
            <webpdf class="custom-webpdf-container">
                <my-tree class="my-tree-container"></my-tree>
                <viewer style="flex: 1"></viewer>
            </webpdf>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
        .custom-webpdf-container {
            display: flex;
            flex-direction: row;
        }
        .my-tree-container {
            width: 200px;
            border-right: 1px solid #ddd;
            overflow-y: scroll;
        }
        .fv__ui-tree-node-selected>.fv__ui-tree-node-wrapper {
            color: red;
        }
    </style>
    <script>
        class MyTreeComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
            template: `<div @var.my_tree="$component">
                <tree
                    selectable="true"
                    draggable="true"
                    editable="true"
                    lazy-mode="none"
                    @setter.data="my_tree.treeData"
                ></tree>
            </div>`
        }) {
            static getName() {
                return 'my-tree'
            }
            treeData = [{
                title: 'More than 10000+ Children',
                id: '1',
                isLeaf: false,
                children: Array(10000).fill(0).map((_,i) => {
                    return {
                        title: '' + (Date.now()+i).toString(26),
                        id: Date.now() + i
                    };
                })
            }];
        }

        UIExtension.modular.root().registerComponent(MyTreeComponent);

        const CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: CustomAppearance,
                addons: []
        });
    </script>

When running the above two examples and clicking to expand a subtree with over 10,000 nodes, it can be observed that without the use of lazy mode, the browser exhibits noticeable stuttering at the outset.