# 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:

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.
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.
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:

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.
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:

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>

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.

← inline-color-picker components Pre-configured component →