.. role:: clio-static
   :class: clio-flag clio-flag-static


####
Tree
####

.. js:class:: ui.tree.Tree

   Provides a tree view component for displaying hierarchical data structures.
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.tree.Tree.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.tree.Tree.styles`
   * :js:data:`~ui.tree.Tree.entries`
   * :js:data:`~ui.tree.Tree.selected`
   * :js:data:`~ui.tree.Tree.tree`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~ui.tree.Tree.expandPath`
   * :js:meth:`~ui.tree.Tree.loadChildrenData`
   * :js:meth:`~ui.tree.Tree.refreshNodeData`
   * :js:meth:`~ui.tree.Tree.removeNode`
   * :js:meth:`~ui.tree.Tree.resetTree`
   * :js:meth:`~ui.tree.Tree.updateContext`
   * :js:meth:`~ui.tree.Tree.updateEntries`
   * :js:meth:`~ui.tree.Tree.updateSelected`
   * :js:meth:`~ui.tree.Tree.render`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.tree.Tree.constructor

      .. rst-class:: sig-pretty-signature
      
         | Tree(): :js:class:`Tree <ui.tree.Tree>`
      
      **Returns**\ : :js:class:`Tree <ui.tree.Tree>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.tree.Tree.styles

      .. rst-class:: clio-flags
      
         :clio-static:`static`
      
      .. rst-class:: sig-pretty-signature
      
         | styles: *CSSResult*\ []
      
      Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.
      
      Note on Content Security Policy:
      
      Element styles are implemented with ``<style>`` tags when the browser doesn't support adopted StyleSheets. To use such ``<style>`` tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or ``nonce-<base64-value>`` with ``<base64-value>`` replaced be a server-generated nonce.
      
      To provide a nonce to use on generated ``<style>`` elements, set ``window.litNonce`` to a server-generated nonce in your page's HTML, before loading application code:
      
      .. code-block:: html
      
         <script>
           // Generated and unique per request:
           window.litNonce = 'a1b2c3d4';
         </script>
      



.. js:data:: ui.tree.Tree.entries

      .. rst-class:: sig-pretty-signature
      
         | entries: *Record*
      
      Holds all tree node data needed for rendering the hierarchy. Maps node keys to TreeEntryData. Reassign to trigger updates.
      



.. js:data:: ui.tree.Tree.selected

      .. rst-class:: sig-pretty-signature
      
         | selected: *number*\ []
      
      Array of selected node keys. Reassign to trigger updates.
      



.. js:data:: ui.tree.Tree.tree

      .. rst-class:: sig-pretty-signature
      
         | tree: :js:data:`ContextWrapper <ui.tree.ContextWrapper>`
      
      Context wrapper providing tree data access methods. Reassign to trigger updates.
      



.. rst-class:: kind-group kind-methods

.. rubric:: Methods
   :class: kind-group-title


.. js:method:: ui.tree.Tree.expandPath

      .. rst-class:: sig-pretty-signature
      
         | expandPath(**nodePath**\ : *number*\ []): *void*
      
      Expands all nodes along the specified path.
      
      **Parameters**
      
      
         **nodePath**\ : *number*\ []
      
      
            Array of node keys representing the path to expand
      
      
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.loadChildrenData

      .. rst-class:: sig-pretty-signature
      
         | loadChildrenData(**parent**\ : :js:data:`TreeEntryData <ui.tree.TreeEntryData>`\ ): *void*
      
      Loads and registers child nodes for a parent node.
      
      **Parameters**
      
      
         **parent**\ : :js:data:`TreeEntryData <ui.tree.TreeEntryData>`
      
      
            The parent node entry
      
      
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.refreshNodeData

      .. rst-class:: sig-pretty-signature
      
         | refreshNodeData(**nodeKey**\ : *number*\ ): *void*
      
      Refreshes node data from context. No-op if node is not loaded.
      
      **Parameters**
      
      
         **nodeKey**\ : *number*
      
      
            The key of the node to refresh
      
      
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.removeNode

      .. rst-class:: sig-pretty-signature
      
         | removeNode(**nodeKey**\ : *number*\ ): *void*
      
      Removes a node and all its children from the tree. No-op if node is not loaded.
      
      **Parameters**
      
      
         **nodeKey**\ : *number*
      
      
            The key of the node to remove
      
      
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.resetTree

      .. rst-class:: sig-pretty-signature
      
         | resetTree(): *void*
      
      Resets the tree to its initial state, clearing all entries and selections.
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.updateContext

      .. rst-class:: sig-pretty-signature
      
         | updateContext(): *void*
      
      Triggers a re-render by reassigning tree context.
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.updateEntries

      .. rst-class:: sig-pretty-signature
      
         | updateEntries(): *void*
      
      Triggers a re-render by reassigning entries.
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.updateSelected

      .. rst-class:: sig-pretty-signature
      
         | updateSelected(): *void*
      
      Triggers a re-render by reassigning selected entries.
      
      **Returns**\ : *void*
      
      
         void
      
      



.. js:method:: ui.tree.Tree.render

      .. rst-class:: sig-pretty-signature
      
         | render(): *unknown*
      
      Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ``ChildPart`` - typically a ``TemplateResult``\ . Setting properties inside this method will *not* trigger the element to update.
      
      **Returns**\ : *unknown*
      




