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


#####################
HoopsModelTreeElement
#####################

.. js:class:: wvc.HoopsModelTreeElement

   Provides a tree view for displaying and navigating the model structure.
   
   This component renders a lazy-loaded tree of model nodes using the model adapter. It supports selection, contextual data storage, and emits events when nodes are interacted with.
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsModelTreeElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsModelTreeElement.styles`
   
   .. rubric:: Accessors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsModelTreeElement.model`
   * :js:func:`~wvc.HoopsModelTreeElement.modelAdapter`
   * :js:func:`~wvc.HoopsModelTreeElement.selected`
   * :js:func:`~wvc.HoopsModelTreeElement.treeElement`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~wvc.HoopsModelTreeElement.getNodeData`
   * :js:meth:`~wvc.HoopsModelTreeElement.refreshNodeData`
   * :js:meth:`~wvc.HoopsModelTreeElement.removeNode`
   * :js:meth:`~wvc.HoopsModelTreeElement.selectNodes`
   * :js:meth:`~wvc.HoopsModelTreeElement.setNodeData`
   * :js:meth:`~wvc.HoopsModelTreeElement.updateNodeData`
   
   



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

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


.. js:method:: wvc.HoopsModelTreeElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsModelTreeElement(): :js:class:`HoopsModelTreeElement <wvc.HoopsModelTreeElement>`
      
      **Returns**\ : :js:class:`HoopsModelTreeElement <wvc.HoopsModelTreeElement>`
      



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

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


.. js:data:: wvc.HoopsModelTreeElement.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>
      



.. rst-class:: kind-group kind-accessors

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


.. js:method:: wvc.HoopsModelTreeElement.model

      .. rst-class:: sig-pretty-signature
      
         | *get* model(): (*undefined* | *IModel*\ )
      
      Gets the model instance used to populate the tree.
      
      **Returns**\ : (*undefined* \| *IModel*\ )
      
      
         The current model instance or undefined
      
      
      .. rst-class:: sig-pretty-signature
      
         | *set* model(**model**\ : (*undefined* | *IModel*\ )): *void*
      
      Sets the model instance used to populate the tree. Setting the model refreshes the displayed tree structure.
      
      **Parameters**
      
      
         **model**\ : (*undefined* \| *IModel*\ )
      
      
            The model instance to set
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.modelAdapter

      .. rst-class:: sig-pretty-signature
      
         | *get* modelAdapter(): (*undefined* | *ModelAdapter*\ )
      
      Gets the model adapter that supplies data to the tree.
      
      **Returns**\ : (*undefined* \| *ModelAdapter*\ )
      
      
         The current model adapter or undefined
      
      
      .. rst-class:: sig-pretty-signature
      
         | *set* modelAdapter(**value**\ : *ModelAdapter*\ ): *void*
      
      Sets the model adapter that supplies data to the tree.
      
      **Parameters**
      
      
         **value**\ : *ModelAdapter*
      
      
            The model adapter to set
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.selected

      .. rst-class:: sig-pretty-signature
      
         | *get* selected(): *number*\ []
      
      Gets the currently selected model node IDs.
      
      **Returns**\ : *number*\ []
      
      
         Array of selected node IDs
      
      
      .. rst-class:: sig-pretty-signature
      
         | *set* selected(**value**\ : *number*\ []): *void*
      
      Sets the currently selected model node IDs.
      
      **Parameters**
      
      
         **value**\ : *number*\ []
      
      
            Array of node IDs to select
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.treeElement

      .. rst-class:: sig-pretty-signature
      
         | *get* treeElement(): (*undefined* | *Tree*\ )
      
      Gets the internal tree component instance. Provides access to the underlying tree API when needed.
      
      **Returns**\ : (*undefined* \| *Tree*\ )
      
      
         The tree element instance or undefined if not initialized
      
      



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

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


.. js:method:: wvc.HoopsModelTreeElement.getNodeData

      .. rst-class:: sig-pretty-signature
      
         | getNodeData(**nodeId**\ : *number*\ ): T
      
      Retrieves custom data associated with a node.
      
      This is a shorthand to allow users to attach reactive data to nodes.
      
      **Parameters**
      
      
         **nodeId**\ : *number*
      
      
            The ID of the node that owns the data
      
      
      
      **Returns**\ : T
      
      
         The stored custom data
      
      



.. js:method:: wvc.HoopsModelTreeElement.refreshNodeData

      .. rst-class:: sig-pretty-signature
      
         | refreshNodeData(**nodeId**\ : *number*\ ): *void*
      
      Refreshes the data for a specific node.
      
      Useful if data provided by the model has changed (child nodes added or removed). If node is not loaded, it does nothing since data will be properly loaded when expanded.
      
      **Parameters**
      
      
         **nodeId**\ : *number*
      
      
            The ID of the node to refresh
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.removeNode

      .. rst-class:: sig-pretty-signature
      
         | removeNode(**nodeId**\ : *number*\ ): *void*
      
      Removes a node and its descendants from the displayed tree.
      
      This notifies the tree that a node has been removed from the model. If the node is not loaded yet, it does nothing.
      
      **Parameters**
      
      
         **nodeId**\ : *number*
      
      
            The ID of the removed node
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.selectNodes

      .. rst-class:: sig-pretty-signature
      
         | selectNodes(**nodeIds**\ : *number*\ [], **selected**\ : *boolean*\ ): *void*
      
      Selects or deselects nodes in the tree.
      
      Reassigning the selected nodes will trigger an update.
      
      **Parameters**
      
      
         **nodeIds**\ : *number*\ []
      
      
            Array of node IDs to update
      
      
         **selected**\ : *boolean*
      
      
            Whether to select (true) or deselect (false) the nodes
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.setNodeData

      .. rst-class:: sig-pretty-signature
      
         | setNodeData(**nodeId**\ : *number*\ , **data**\ : *unknown*\ ): *void*
      
      Stores custom data for a node, replacing any existing value.
      
      If the node had already a value it is erased. Setting node data will trigger an update.
      
      **Parameters**
      
      
         **nodeId**\ : *number*
      
      
            The ID of the node that owns the data
      
      
         **data**\ : *unknown*
      
      
            The data to store
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: wvc.HoopsModelTreeElement.updateNodeData

      .. rst-class:: sig-pretty-signature
      
         | updateNodeData(**nodeId**\ : *number*\ , **data**\ : *unknown*\ ): *void*
      
      Merges custom data into an existing node entry.
      
      If the node did not have data, it is added to the context. If the given data is an array and the context node data is an array, the data passed as argument are appended to the context data. If both are objects, then the objects are merged using Object.assign, with the data argument being the last object of the merge. Otherwise it is equivalent to setNodeData.
      
      Updating node data will trigger an update.
      
      **Parameters**
      
      
         **nodeId**\ : *number*
      
      
            The ID of the node that owns the data
      
      
         **data**\ : *unknown*
      
      
            The data to merge into the node entry
      
      
      
      **Returns**\ : *void*
      
      
      




