# ch-tree-view-render

## Table of Contents

- [Overview](#overview)
- [Features](#features)
- [Use when](#use-when)
- [Do not use when](#do-not-use-when)
- [Accessibility](#accessibility)
- [Usage](./usage.md)
- [Properties](#properties)
- [Events](#events)
- [Methods](#methods)
  - [`dropItems`](#dropitemsacceptdrop-boolean-datatransferinfo-treeviewdatatransferinfo-model-treeviewmodel--promisevoid)
  - [`getItemPath`](#getitempathitemid-string--promisetreeviewitemmodel--null)
  - [`getItemsInfo`](#getitemsinfoitemsid-string--promisetreeviewitemmodelextended)
  - [`loadLazyContent`](#loadlazycontentitemid-string-model-treeviewmodel-downloading-boolean-lazy-boolean--promisevoid)
  - [`reloadItems`](#reloaditemsitemid-string-beforeproperties-partialtreeviewitemmodel-afterproperties-partialtreeviewitemmodel--promiseboolean)
  - [`removeItems`](#removeitemsitems-string--promisevoid)
  - [`scrollIntoVisible`](#scrollintovisiblepath-string--string-afterproperties-partialtreeviewitemmodel--promiseboolean)
  - [`toggleItems`](#toggleitemstreeitemids-string-expand-boolean--promisetreeviewitemexpandedinfo)
  - [`updateAllItemsProperties`](#updateallitemspropertiesproperties--expanded-boolean-checked-boolean---promisevoid)
  - [`updateItemsProperties`](#updateitemspropertiesitems-string-properties-partialtreeviewitemmodel--promisevoid)
  - [`updateValidDropZone`](#updatevaliddropzonerequesttimestamp-number-newcontainerid-string-draggeditems-gxdatatransferinfo-droptype-treeviewdroptype-validdrop-boolean--promisevoid)
- [Dependencies](#dependencies)
  - [Used by](#used-by)
  - [Depends on](#depends-on)
  - [Graph](#graph)
- [Styling](./styling.md)

<!-- Auto Generated Below -->

## Overview

The `ch-tree-view-render` component displays hierarchical data as an interactive tree with full-featured node management

## Features
 - Expand and collapse nodes with configurable expandable button styles
 - Single or multi-selection of nodes
 - Tri-state checkboxes with toggle support
 - Inline caption editing
 - Drag-and-drop reordering of nodes
 - Lazy loading of child items
 - Keyboard navigation
 - Filtering by caption, metadata, or custom list
 - Start and end images per node
 - Relationship lines connecting siblings and parents
 - Context menu support

## Use when
 - Building a full-featured tree widget (file explorers, organizational charts, permission editors, or any master list with nested structure)
 - Navigating or selecting nodes within deeply hierarchical data (e.g., file system, code symbols, category trees)
 - Users need to expand, collapse, and select items at multiple nesting levels

## Do not use when
 - Building simpler navigation hierarchies without checkboxes, drag-and-drop, or editing -- prefer `ch-navigation-list-render` instead
 - Used as a PRIMARY navigation menu — prefer `ch-navigation-list-render`, which carries proper navigation semantics for assistive technology
 - Content sections have collapsible summaries (FAQs) — prefer `ch-accordion-render`
 - The data is flat or only one level deep — prefer `ch-action-list-render`
 - Nesting depth regularly exceeds 10 levels — UX becomes untenable

## Accessibility
 - Implements a tree-view keyboard pattern: Arrow keys to navigate, Enter/Space to select, Left/Right to collapse/expand, F2 to start editing the caption, and Delete/Backspace to remove the focused item
 - Checkbox items support tri-state (`checked`, `unchecked`, `indeterminate`) with matching ARIA states
 - Items can be individually disabled, preventing keyboard and pointer interaction

## Properties

| Property                     | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type                                                                                                                                                                        | Default                    |
| ---------------------------- | ------------------- |   | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `checkDroppableZoneCallback` | --                  | Callback that is executed when an element tries to drop in another item of the tree. Returns whether the drop is valid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `(dropInformation: TreeViewDropCheckInfo) => Promise<boolean>`                                                                                                              | `undefined`                |
| `checkbox`                   | `checkbox`          | Set this attribute if you want display a checkbox in all items by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `boolean`                                                                                                                                                                   | `false`                    |
| `checked`                    | `checked`           | Set this attribute if you want the checkbox to be checked in all items by default. Only works if `checkbox = true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `boolean`                                                                                                                                                                   | `false`                    |
| `dragDisabled`               | `drag-disabled`     | This attribute lets you specify if the drag operation is disabled in all items by default. If `true`, the items can't be dragged. Note: the default value is `true` (dragging disabled), so you must explicitly set this to `false` to enable drag.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `boolean`                                                                                                                                                                   | `true`                     |
| `dropDisabled`               | `drop-disabled`     | This attribute lets you specify if the drop operation is disabled in all items by default. If `true`, the items won't accept any drops. Note: the default value is `true` (dropping disabled), so you must explicitly set this to `false` to enable drop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `boolean`                                                                                                                                                                   | `true`                     |
| `dropItemsCallback`          | --                  | Callback that is executed when a list of items request to be dropped into another item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `(dataTransferInfo: TreeViewDataTransferInfo) => Promise<{ acceptDrop: boolean; model?: TreeViewModel; }>`                                                                  | `undefined`                |
| `dropMode`                   | `drop-mode`         | This attribute lets you specify which kind of drop operation can be effected in the items.  - `"above"`: Items can only be dropped on top of another item (reparent).  - `"before-and-after"`: Items can be dropped before or after a sibling     (reorder), but not on top of another item.  - `"all"`: Both above and before-and-after drop targets are available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `"above" \| "all" \| "before-and-after"`                                                                                                                                    | `"above"`                  |
| `editableItems`              | `editable-items`    | This attribute lets you specify if the edit operation is enabled in all items by default. If `true`, the items can edit its caption in place.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                   | `false`                    |
| `expandOnClick`              | `expand-on-click`   | Specifies if a tree-view-item is expanded on click interaction. If `true` the tree-view-item is expanded on click interaction. If `false`, with mouse interaction the tree-view-item will only be expanded on double click.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `boolean`                                                                                                                                                                   | `true`                     |
| `expandableButton`           | `expandable-button` | Specifies what kind of expandable button is displayed in the items by default.  - `"action"`: An interactive expandable button that allows users to     expand/collapse the items of the control.  - `"decorative"`: Only a decorative icon is rendered to display the state     of the item.  - `"no"`: No expandable button is rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `"action" \| "decorative" \| "no"`                                                                                                                                          | `"decorative"`             |
| `filter`                     | `filter`            | This property lets you determine the expression that will be applied to the filter. Only works if `filterType = "caption" \| "metadata"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `RegExp \| string`                                                                                                                                                          | `undefined`                |
| `filterDebounce`             | `filter-debounce`   | This property lets you determine the debounce time (in ms) that the control waits until it processes the changes to the filter property. Consecutive changes to the `filter` property between this range, reset the timeout to process the filter. Only works if `filterType = "caption" \| "metadata"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `number`                                                                                                                                                                    | `250`                      |
| `filterList`                 | --                  | This property lets you determine the list of items that will be filtered. Only works if `filterType = "list"`. If `undefined` or `null` all items will be rendered. If `[]` no items will be rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string[]`                                                                                                                                                                  | `undefined`                |
| `filterOptions`              | --                  | This property lets you determine the options that will be applied to the filter. `TreeViewFilterOptions` accepts `hideMatchesAndDescendants` and `regularExpression` flags that control how filtered items and their descendants are displayed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{ autoExpand?: boolean; hideMatchesAndShowNonMatches?: boolean; highlightMatchedItems?: boolean; matchCase?: boolean; }`                                                   | `{}`                       |
| `filterType`                 | `filter-type`       | This attribute lets you define what kind of filter is applied to items. Only items that satisfy the filter predicate will be displayed.  \| Value       \| Details                                                                                        \| \| ----------- \| ---------------------------------------------------------------------------------------------- \| \| `checked`   \| Show only the items that have a checkbox and are checked.                                      \| \| `unchecked` \| Show only the items that have a checkbox and are not checked.                                  \| \| `caption`   \| Show only the items whose `caption` satisfies the regex determinate by the `filter` property.  \| \| `metadata`  \| Show only the items whose `metadata` satisfies the regex determinate by the `filter` property. \| \| `list`      \| Show only the items that are contained in the array determinate by the `filterList` property.  \| \| `none`      \| Show all items.                                                                                \| | `"caption" \| "checked" \| "list" \| "metadata" \| "none" \| "unchecked"`                                                                                                   | `"none"`                   |
| `getImagePathCallback`       | --                  | This property specifies a callback that is executed when the path for an item image needs to be resolved. With this callback, there is no need to re-implement item rendering (`renderItem` property) just to change the path used for the images.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `(item: TreeViewItemModel, iconDirection: "start" \| "end") => string \| TreeViewItemImageMultiState`                                                                       | `undefined`                |
| `gxImageConstructor`         | --                  | This property is a WA to implement the Tree View as a UC 2.0 in GeneXus.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `(name: string) => any`                                                                                                                                                     | `undefined`                |
| `gxSettings`                 | `gx-settings`       | This property is a WA to implement the Tree View as a UC 2.0 in GeneXus.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `any`                                                                                                                                                                       | `undefined`                |
| `lazyLoadTreeItemsCallback`  | --                  | Callback that is executed when an item requests to load its subitems. The callback receives the `id` of the item being expanded and must return a `Promise` that resolves with the child `TreeViewModel` array. While the promise is pending the item shows a loading indicator.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `(treeItemId: string) => Promise<TreeViewItemModel[]>`                                                                                                                      | `undefined`                |
| `model`                      | --                  | This property lets you define the model of the ch-tree-view-render control.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `TreeViewItemModel[]`                                                                                                                                                       | `[]`                       |
| `modifyItemCaptionCallback`  | --                  | Callback that is executed when a item request to modify its caption.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `(treeItemId: string, newCaption: string) => Promise<TreeViewOperationStatusModifyCaption>`                                                                                 | `undefined`                |
| `multiSelection`             | `multi-selection`   | Set this attribute if you want to allow multi selection of the items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                   | `false`                    |
| `renderItem`                 | --                  | This property allows us to implement custom rendering of tree items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `(itemModel: any, treeState: ChTreeViewRender, treeHasFilter: boolean, lastItem: boolean, level: number, dropBeforeAndAfterEnabled: boolean, useGxRender?: boolean) => any` | `defaultRenderItem`        |
| `showLines`                  | `show-lines`        | `true` to display the relation between tree items and tree lists using lines.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `"all" \| "last" \| "none"`                                                                                                                                                 | `"none"`                   |
| `sortItemsCallback`          | --                  | Callback that is executed when the `model` is changed to order its items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `(subModel: TreeViewModel) => void`                                                                                                                                         | `defaultSortItemsCallback` |
| `toggleCheckboxes`           | `toggle-checkboxes` | Set this attribute if you want all the children item's checkboxes to be checked when the parent item checkbox is checked, or to be unchecked when the parent item checkbox is unchecked. This attribute will be used in all items by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                   | `false`                    |
| `useGxRender`                | `use-gx-render`     | This property is a WA to implement the Tree View as a UC 2.0 in GeneXus.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                   | `false`                    |

## Events

| Event                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Type                                                                                                                 |
| --------------------- |   | -------------------------------------------------------------------------------------------------------------------- |
| `checkedItemsChange`  | Fired when the checked items change. This event does take into account the currently filtered items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `CustomEvent<Map<string, TreeViewItemModelExtended>>`                                                                |
| `itemContextmenu`     | Fired when an element displays its contextmenu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `CustomEvent<{ id: string; itemRef: HTMLChTreeViewItemElement; metadata: string; contextmenuEvent: PointerEvent; }>` |
| `itemOpenReference`   | Fired when the user interacts with an item in a way that its reference must be opened.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `CustomEvent<{ id: string; leaf: boolean; metadata: string; }>`                                                      |
| `selectedItemsChange` | Fired when the selected items change. This event can be fired by the following conditions:   1. A user changes the selected items interacting with the Tree View.    2. The `multiSelection` value is changed from `true` to `false`.    3. A selected item is no longer rendered because it does not satisfies a      filter condition.    4. TODO: The `treeModel` property is updated and contains different selected      items. Even if it does not contains different selected items, this      event is fired because the selected items can have a different path      than before the `treeModel` update.    5. The `updateItemsProperties` method is executed, changing the item      selection.    6. A selected item is removed.    7. TODO: A selected item is moved into a new parent with drag and drop.      In this case, since the detail of the event contains the information      of the parent, this event must be fired to update the information.    8. Executing `scrollIntoVisible` method and updating the selected value      of the scrolled item.    9. TODO: An external item is dropped into the Tree View and the item is      selected.   10. TODO: Lazy loading content that has selected items?  Thing that does not fire this event:   - TODO: Renaming a selected item.    - TODO: Applying a filter that keeps all selected items rendered. | `CustomEvent<TreeViewItemModelExtended[]>`                                                                           |

## Methods

### `dropItems(acceptDrop: boolean, dataTransferInfo: TreeViewDataTransferInfo, model?: TreeViewModel) => Promise<void>`

Given the drop accepting, the data transfer info and the external items,
it process the drops of the items in the tree

#### Parameters

| Name               | Type                                                                                                                                                                | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `acceptDrop`       | `boolean`                                                                                                                                                           |             |
| `dataTransferInfo` | `{ newContainer: GxDataTransferInfo; draggedItems: GxDataTransferInfo[]; draggingSelectedItems: boolean; dropInTheSameTree: boolean; dropType: TreeViewDropType; }` |             |
| `model`            | `TreeViewItemModel[]`                                                                                                                                               |             |

#### Returns

Type: `Promise<void>`

### `getItemPath(itemId: string) => Promise<TreeViewItemModel[] | null>`

Returns item's path (an ordered array of the UI models that creates the path
from the root to the ID) given the item ID, and null if there is no such item
otherwise

This method doesn't change its behavior if the tree view has filters
applied

#### Parameters

| Name     | Type     | Description         |
| -------- | -------- | ------------------- |
| `itemId` | `string` | The id of the item. |

#### Returns

Type: `Promise<TreeViewItemModel[]>`

### `getItemsInfo(itemsId: string[]) => Promise<TreeViewItemModelExtended[]>`

Given a list of ids, it returns an array of the items that exists in the
given list

#### Parameters

| Name      | Type       | Description |
| --------- | ---------- | ----------- |
| `itemsId` | `string[]` |             |

#### Returns

Type: `Promise<TreeViewItemModelExtended[]>`

### `loadLazyContent(itemId: string, model?: TreeViewModel, downloading?: boolean, lazy?: boolean) => Promise<void>`

Given an item id, an array of items to add, the download status and the
lazy state, updates the item's UI Model

#### Parameters

| Name          | Type                  | Description |
| ------------- | --------------------- | ----------- |
| `itemId`      | `string`              |             |
| `model`       | `TreeViewItemModel[]` |             |
| `downloading` | `boolean`             |             |
| `lazy`        | `boolean`             |             |

#### Returns

Type: `Promise<void>`

### `reloadItems(itemId: string, beforeProperties?: Partial<TreeViewItemModel>, afterProperties?: Partial<TreeViewItemModel>) => Promise<boolean>`

Given an item id and the additional properties to update before and after
reload, it reloads the items of the `itemId` node by using the
`lazyLoadTreeItemsCallback` property

#### Parameters

| Name               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Description |
| ------------------ |   | ----------- |
| `itemId`           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |             |
| `beforeProperties` | `{ id?: string; caption?: string; checkbox?: boolean; checked?: boolean; disabled?: boolean; downloading?: boolean; dragDisabled?: boolean; dropDisabled?: boolean; editable?: boolean; expanded?: boolean; endImgSrc?: string; endImgType?: ImageRender; lastItemId?: string; lazy?: boolean; leaf?: boolean; indeterminate?: boolean; items?: TreeViewModel; metadata?: string; order?: number; parts?: string; render?: boolean; selected?: boolean; startImgSrc?: string; startImgType?: ImageRender; toggleCheckboxes?: boolean; }` |             |
| `afterProperties`  | `{ id?: string; caption?: string; checkbox?: boolean; checked?: boolean; disabled?: boolean; downloading?: boolean; dragDisabled?: boolean; dropDisabled?: boolean; editable?: boolean; expanded?: boolean; endImgSrc?: string; endImgType?: ImageRender; lastItemId?: string; lazy?: boolean; leaf?: boolean; indeterminate?: boolean; items?: TreeViewModel; metadata?: string; order?: number; parts?: string; render?: boolean; selected?: boolean; startImgSrc?: string; startImgType?: ImageRender; toggleCheckboxes?: boolean; }` |             |

#### Returns

Type: `Promise<boolean>`

### `removeItems(items: string[]) => Promise<void>`

Given a list of ids, removes the items and their children in the tree

#### Parameters

| Name    | Type       | Description |
| ------- | ---------- | ----------- |
| `items` | `string[]` |             |

#### Returns

Type: `Promise<void>`

### `scrollIntoVisible(path: string | string[], afterProperties?: Partial<TreeViewItemModel>) => Promise<boolean>`

Given the path of the item (represent by a sorted array containing all ids
from the root to the item) and the additional properties to update after,
it displays and scrolls into the item view
The path can also be a string representing the id of the item to scroll
into

When using a path, this method will fail if:
  - The path does not start from the root element
  - The path contains a cycle
  - The path does not correspond to a valid path on the server:
    - One of the item of the path, except for the last one, is a leaf
    - An item in the path does not exists on the server
    - The path has repeated items
    - And so on

#### Parameters

| Name              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Description |
| ----------------- |   | ----------- |
| `path`            | `string \| string[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |             |
| `afterProperties` | `{ id?: string; caption?: string; checkbox?: boolean; checked?: boolean; disabled?: boolean; downloading?: boolean; dragDisabled?: boolean; dropDisabled?: boolean; editable?: boolean; expanded?: boolean; endImgSrc?: string; endImgType?: ImageRender; lastItemId?: string; lazy?: boolean; leaf?: boolean; indeterminate?: boolean; items?: TreeViewModel; metadata?: string; order?: number; parts?: string; render?: boolean; selected?: boolean; startImgSrc?: string; startImgType?: ImageRender; toggleCheckboxes?: boolean; }` |             |

#### Returns

Type: `Promise<boolean>`

### `toggleItems(treeItemIds: string[], expand?: boolean) => Promise<TreeViewItemExpandedInfo[]>`

This method is used to toggle a tree item by the tree item id/ids

#### Parameters

| Name          | Type       | Description                                                                         |
| ------------- | ---------- | ----------------------------------------------------------------------------------- |
| `treeItemIds` | `string[]` | An array id the tree items to be toggled.                                           |
| `expand`      | `boolean`  | A boolean indicating that the tree item should be expanded or collapsed. (optional) |

#### Returns

Type: `Promise<TreeViewItemExpandedInfo[]>`

The modified items after the method was called

### `updateAllItemsProperties(properties: { expanded?: boolean; checked?: boolean; }) => Promise<void>`

Given a subset of item's properties, it updates all item UI models

#### Parameters

| Name         | Type                                         | Description |
| ------------ | -------------------------------------------- | ----------- |
| `properties` | `{ expanded?: boolean; checked?: boolean; }` |             |

#### Returns

Type: `Promise<void>`

### `updateItemsProperties(items: string[], properties: Partial<TreeViewItemModel>) => Promise<void>`

Given a item list and the properties to update, it updates the properties
of the items in the list

#### Parameters

| Name         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Description |
| ------------ |   | ----------- |
| `items`      | `string[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |             |
| `properties` | `{ id?: string; caption?: string; checkbox?: boolean; checked?: boolean; disabled?: boolean; downloading?: boolean; dragDisabled?: boolean; dropDisabled?: boolean; editable?: boolean; expanded?: boolean; endImgSrc?: string; endImgType?: ImageRender; lastItemId?: string; lazy?: boolean; leaf?: boolean; indeterminate?: boolean; items?: TreeViewModel; metadata?: string; order?: number; parts?: string; render?: boolean; selected?: boolean; startImgSrc?: string; startImgType?: ImageRender; toggleCheckboxes?: boolean; }` |             |

#### Returns

Type: `Promise<void>`

### `updateValidDropZone(requestTimestamp: number, newContainerId: string, draggedItems: GxDataTransferInfo[], dropType: TreeViewDropType, validDrop: boolean) => Promise<void>`

Update the information about the valid droppable zones

#### Parameters

| Name               | Type                             | Description                                                                            |
| ------------------ | -------------------------------- | -------------------------------------------------------------------------------------- |
| `requestTimestamp` | `number`                         | Time where the request to the server was made. Useful to avoid having old information. |
| `newContainerId`   | `string`                         | ID of the container where the drag is trying to be made.                               |
| `draggedItems`     | `GxDataTransferInfo[]`           | Information about the dragged items.                                                   |
| `dropType`         | `"after" \| "before" \| "above"` | Type of drop that wants to be effected                                                 |
| `validDrop`        | `boolean`                        | Current state of the droppable zone.                                                   |

#### Returns

Type: `Promise<void>`

### Graph
```mermaid
graph TD;
  ch-tree-view-render --> ch-tree-view
  ch-tree-view-render --> ch-tree-view-drop
  ch-tree-view-render --> ch-tree-view-item
  ch-tree-view-item --> ch-checkbox
  ch-test-flexible-layout --> ch-tree-view-render
  style ch-tree-view-render fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------


