Компонент TreeList служит для отображения ветвящихся иерархических структур, таких как дерево наследования объектов.
Отображение столбцов в компоненте можно регулировать при помощи раскрывающегося списка, расположенного в правом верхнем углу. Выбор столбцов, которые будут отображаться, осуществляется за счет установки флажков напротив соответствующих заголовков:

Отображение линий, соединяющих вершины дерева.
Перенос текста вершин по словам.
Сворачивание/разворачивание вершин.
Сортировка
коллекции вершин происходит при нажатии на заголовок столбца. Вершины
сортируются по выбранному столбцу. Если после нажатия на заголовок
появляется пиктограмма
,
значит была осуществлена сортировка по убыванию. Если появляется пиктограмма
, вершины отсортированы по возрастанию.
Фильтрация коллекции вершин.
Настройка всплывающей подсказки для вершин и заголовков столбцов.
Возможность установки флажка и пиктограммы для каждой вершины.
Перетаскивание столбцов.
Перетаскивание вершин (в том числе между несколькими деревьями на одной странице).
Появление вертикальной и горизонтальной полос прокрутки при необходимости, режим виртуальной прокрутки.
Выделение области дерева при помощи мыши (с выделением входящих в эту область вершин).
Компонент реализован классом TreeList. Вершины реализованы классом TreeNode, столбцы - классом TreeColumn. Коллекция столбцов реализована классом TreeColumns, коллекция вершин - классом TreeNodes. Классы TreeColumns и TreeNodes наследуются от базового класса List.
Компонент имеет следующий вид:

Пример создания компонента TreeList
Пример динамического создания компонента TreeList
| Имя конструктора | Краткое описание | |
| TreeList | Конструктор TreeList создает экземпляр компонента TreeList. |
| Имя свойства | Краткое описание | |
| ActiveColor | Свойство ActiveColor определяет цвет активной вершины дерева. | |
| ActiveFont | Свойство ActiveFont определяет параметры шрифта активной вершины дерева. | |
| ActiveParentColor | Свойство ActiveParentColor определяет цвет выделения родительских вершин активного элемента дерева. | |
| AreaSelect | Свойство AreaSelect определяет, доступно ли выделение области дерева мышью. | |
| CaptionVisible | Свойство CaptionVisible определяет, отображается ли строка заголовков. | |
| CheckBoxes | Свойство CheckBoxes определяет, отображаются ли флажки для вершин компонента. | |
| ChildrenCount | Свойство ChildrenCount содержит количество вершин в корневой ветви. | |
| Columns | Свойство Columns устанавливает коллекцию столбцов для компонента. | |
| ContentColor | Свойство ContentColor определяет цвет фона содержимого вершины дерева. | |
| ContentFont | Свойство ContentFont определяет параметры шрифта вершин дерева. | |
| CutOverflow | Свойство CutOverflow определяет, нужно ли отображать многоточие на месте невмещающегося текста. | |
| DblClickExpand | Свойство DblClickExpand определяет, раскрывается ли вершина дерева при двойном клике по ней. | |
| DragAndDropDelay | Свойство DragAndDropDelay определяет, сколько времени нужно продержать курсор над вершиной с одновременным нажатием на кнопку мыши, чтобы активировался режим Drag&Drop. | |
| DragAndDropDetectDistance | Свойство DragAndDropDetectDistance определяет дистанцию, после которой включается режим Drag&Drop. | |
| DragAndDropMode | Свойство DragAndDropMode устанавливает режим работы Drag&Drop. | |
| EmptySelection | Свойство EmptySelection определяет, можно ли снимать отметку со всех вершин дерева. | |
| EnableColumnsMenu | Свойство EnableColumnsMenu определяет видимость пиктограммы меню в заголовке дерева и возможность вызова меню, управляющее видимостью колонок. | |
| EnableDragAndDrop | Свойство EnableDragAndDrop определяет, возможно ли перемещать вершины при помощи механизма Drag&Drop. | |
| EnableEdit | Свойство EnableEdit определяет, возможно ли редактирование значений в ячейках таблицы. | |
| EnableHighlight | Свойство EnableHighlight определяет, доступна ли подсветка элементов дерева. | |
| EnableKeyNavigation | Свойство EnableKeyNavigation определяет возможность перемещения по списку при помощи клавиатуры. | |
| EnableResizeColumn | Свойство EnableResizeColumn определяет, возможно ли изменять ширину столбцов. | |
| EnableSearch | Свойство EnableSearch определяет возможность поиска элементов дерева. | |
| EnableSelectedHighlight | Свойство EnableSelectedHighlight определяет, возможна ли подсветка выделенных вершин дерева. | |
| EnableSortColumns | Свойство EnableSortColumns определяет, возможна ли сортировка в столбцах. | |
| FilterCaseSensitive | Свойство FilterCaseSensitive определяет, будет ли фильтрация регистрозависимой. | |
| FilterDeSelect | Свойство FilterDeSelect определяет сброс выделения вершин при фильтрации. | |
| FirstShiftSelectClearing | Свойство FirstShiftSelectClearing устанавливает режим, при котором первое нажатие кнопки мыши по вершине с зажатой кнопкой SHIFT снимает выделение со всех вершин, кроме нажатой. | |
| HighlightColor | Свойство HighlightColor определяет цвет подсветки элемента дерева. | |
| HighlightFont | Свойство HighlightFont определяет шрифт подсвечиваемой вершины дерева. | |
| HoverColor | Свойство HoverColor определяет цвет вершины дерева, на которую наведен курсор мыши. | |
| HoverFont | Свойство HoverFont определяет параметры шрифта вершины дерева, на которую наведен курсор. | |
| IgnoreRightPadding | Свойство IgnoreRightPadding определяет игнорирование правого отступа. | |
| ImageList | Свойство ImageList устанавливает невизуальный компонент ImageList. | |
| IsCSMultiSelect | Свойство IsCSMultiSelect определяет, включена ли возможность множественной отметки при помощи клавиш SHIFT и CTRL. | |
| KeepHasChild | Свойство KeepHasChild определяет изменение отображения иерархического дерева и изменение свойства HasChild у вершин во время работы режима Drag&Drop. | |
| LoadingTimeout | Свойство LoadingTimeout определяет промежуток времени, через который произойдет загрузка дерева. | |
| MultiSelect | Свойство MultiSelect определяет возможность множественной отметки элементов. | |
| Nodes | Свойство Nodes устанавливает коллекцию вершин. | |
| RightButtonSelect | Свойство RightButtonSelect определяет, возможен ли выбор вершины при клике правой клавишей мыши. | |
| RowSelect | Свойство RowSelect определяет, подсвечивается ли при выборе элемента вся строка. | |
| SearchColor | Свойство SearchColor определяет цвет искомого текста. | |
| SearchFont | Свойство SearchFont определяет параметры шрифта искомого текста. | |
| SelectedHighlightColor | Свойство SelectedHighlightColor определяет цвет подсветки выделенных вершин дерева. | |
| SelectedHighlightFont | Свойство SelectedHighlightFont определяет шрифт подсвеченной выделенной вершины дерева. | |
| SelectEditorText | Свойство SelectEditorText определяет, будет ли выделяться редактируемый текст. | |
| ShowColumns | Свойство ShowColumns определяет, отображаются ли столбцы. | |
| ShowGridLines | Свойство ShowGridLines определяет, отображается ли сетка таблицы. | |
| ShowLines | Свойство ShowLines определяет, будут ли отображаться линии, соединяющие вершину с ее потомками. | |
| ShowToolTips | Свойство ShowToolTips определяет отображение всплывающих подсказок при наведении курсора мыши на вершину дерева. | |
| SortSequence | Свойство SortSequence определяет порядок изменения сортировки. | |
| UseCtrlSelect | Свойство UseCtrlSelect определяет возможность выбора нескольких вершин при удержании клавиши «Ctrl». | |
| UseShiftSelect | Свойство UseShiftSelect определяет возможность выбора нескольких последовательно расположенных вершин при удержании клавиши «Shift». | |
| WordWrap | Свойство WordWrap определяет, осуществляется ли перенос текста вершины по словам. |
| Имя метода | Краткое описание | |
| beginUpdate | Метод beginUpdate отключает перерисовку дерева, пока не будет вызван endUpdate. | |
| checkSelection | Метод checkSelection снимает выделение со всех вершин кроме последней выбранной. | |
| clearSelection | Метод clearSelection снимает выделение со всех элементов дерева. | |
| collapseAll | Метод collapseAll сворачивает все вершины дерева. | |
| deleteNode | Метод deleteNode удаляет вершину иерархического дерева. | |
| deSelectAll | Метод deSelectAll удаляет отметку с выбранных элементов. | |
| deSelectLevel | Метод deSelectLevel снимет отметку с элементов указанного уровня. | |
| endUpdate | Метод endUpdate обновляет дерево и включает перерисовку. | |
| expandAll | Метод expandAll разворачивает все вершины дерева. | |
| expandToKeyNode | Метод expandToKeyNode ищет в дереве вершину с указанным ключом и раскрывает дерево на уровне этой вершины. | |
| expandToNode | Метод expandToNode раскрывает все вершины вплоть до указанной. | |
| filter | Метод filter фильтрует вершины в иерархическом дереве. | |
| find | Метод find осуществляет поиск элемента дерева. | |
| findText | Метод findText возвращает вершину дерева, значение которой полностью совпадает с переданным значением. | |
| getAllCollapsedKeys | Метод getAllCollapsedKeys возвращает массив ключей, принадлежащих всем закрытым вершинам дерева и вершинам, не имеющим потомков. | |
| getAllExpandedKeys | Метод getAllExpandedKeys возвращает массив ключей, принадлежащих всем раскрытым вершинам дерева. | |
| getAllNodes | Метод getAllNodes возвращает одномерный массив, содержащий все вершины дерева с текущим порядком сортировки. | |
| getAllSelectedKeys | Метод getAllSelectedKeys возвращает массив ключей, принадлежащих всем выделенным вершинам дерева. | |
| getCaptionHeight | Метод getCaptionHeight возвращает высоту заголовков столбцов. | |
| getFirstVisibleIndex | Метод getFirstVisibleIndex возвращает индекс первой видимой вершины в дереве. | |
| getFocusedNode | Метод getFocusedNode возвращает вершину в фокусе. | |
| getFullTreeHeight | Метод getFullTreeHeight возвращает высоту дерева. | |
| getHasSecondLevel | Метод getHasSecondLevel определяет, имеет ли дерево дочерние вершины. | |
| getHorizontalScroll | Метод getHorizontalScroll возвращает горизонтальную полосу прокрутки. | |
| getLastFound | Метод getLastFound возвращает последнюю найденную вершину. | |
| getLastSearch | Метод getLastSearch возвращает последнюю искомую строку. | |
| getMaximalWidthForColumn | Метод getMaximalWidthForColumn возвращает максимальную ширину содержимого в колонке, в видимых строках. | |
| getMaximalWidthForColumnFull | Метод getMaximalWidthForColumnFull возвращает максимальную ширину содержимого в столбце, во всех строках. | |
| getNodeByIndex | Метод getNodeByIndex возвращает вершину дерева по ее индексу. | |
| getNodeByKey | Метод getNodeByKey возвращает вершину первого уровня по ее ключу. | |
| getNodeLevel | Метод getNodeLevel определяет уровень, на котором расположена указанная вершина. | |
| getNodes | Метод getNodes возвращает объект класса PP.Ui.TreeNodes, содержащий вершины иерархического дерева. | |
| getOptimalWidthForColumn | Метод getOptimalWidthForColumn возвращает оптимальную ширину столбца. | |
| getPixelHeight | Метод getPixelHeight возвращает значение высоты (в пикселях) компонента дерева. | |
| getPixelWidth | Метод getPixelWidth возвращает значение ширины (в пикселях) компонента дерева. | |
| getRootNode | Метод getRootNode возвращает объект, ассоциированный с корнем дерева. | |
| getSelectedNodes | Метод getSelectedNodes возвращает выделенные вершины. | |
| getSelectedNodesCount | Метод getSelectedNodesCount возвращает число выделенных вершин в дереве | |
| getSort | Метод getSort возвращает объект с параметрами сортировки. | |
| getSortColumn | Метод getSortColumn возвращает номер столбца, в котором производится сортировка. | |
| getSortMethod | Метод getSortMethod возвращает способ сортировки. | |
| getSortProperty | Метод getSortProperty возвращает название свойства вершины, по которому будет производиться сортировка. | |
| getSortRecursive | Метод getSortRecursive определяет, производится ли сортировка в дочерних вершинах. | |
| getTopMargin | Метод getTopMargin возвращает отступ верхней вершины. | |
| getTopShift | Метод getTopShift возвращает смещение верхней вершины. | |
| getVerticalScroll | Метод getVerticalScroll возвращает вертикальную полосу прокрутки. | |
| getVisibleNodes | Метод getVisibleNodes возвращает одномерный массив, содержащий вершины дерева, отображаемые в нем в настоящий момент. | |
| getVisibleNodesCount | Метод getVisibleNodesCount возвращает количество отображаемых в текущий момент вершин дерева. | |
| highlight | Метод highlight подсвечивает указанный текст в подписях вершин дерева. | |
| isDraging | Метод IsDraging определяет признак режима перетаскивания. | |
| isEditing | Метод IsEditing определяет признак режима редактирования. | |
| isSelecting | Метод IsSelecting определяет признак режима выделения. | |
| redraw | Метод redraw полностью перерисовывает иерархическое дерево. | |
| removeFocus | Метод removeFocus снимает фокус с вершины. | |
| removeHover | Метод removeHover снимает эффекты с вершины, появляющиеся при наведении курсора мыши на нее. | |
| scrollToNode | Метод scrollToNode осуществляет прокрутку дерева до указанной вершины. | |
| selectAll | Метод selectAll выделяет все вершины дерева. | |
| selectLevel | Метод selectLevel выбирает все вершины указанного уровня. | |
| setExpandedByKeys | Метод setExpandedByKeys раскрывает вершины по ключам, указанным в массиве keys. | |
| setExpandedForNode | Метод setExpandedForNode открывает или скрывает вершину, в зависимости от переданного значения. | |
| setHoveredNode | Метод setHoveredNode устанавливает вершину, которая будет отображаться как при наведении на нее курсора. | |
| setSelectedByKeys | Метод setSelectedByKeys устанавливает отметку для всех вершин дерева с указанными ключами. | |
| showSearch | Метод showSearch открывает строку поиска. | |
| sort | Метод sort осуществляет сортировку элементов дерева по столбцу. | |
| startEditing | Метод startEditing активирует режим редактирования указанной вершины. | |
| update | Метод update обновляет отображение дерева. |
| Имя события | Краткое описание | |
| BeforeCollapse | Событие BeforeCollapse наступает перед сворачиванием вершины дерева. | |
| BeforeExpand | Событие BeforeExpand наступает перед разворачиванием вершины дерева. | |
| CheckBoxClick | Событие CheckBoxClick наступает при клике мыши по флажку. | |
| CheckedChanged | Событие CheckedChanged наступает при смене состояния флажка. | |
| Collapse | Событие Collapse наступает при сворачивании вершин дерева. | |
| ColumnVisibilityChanged | Событие ColumnVisibilityChanged наступает после изменения видимости столбца дерева. | |
| ColumnVisibilityChanging | Событие ColumnVisibilityChanging наступает при изменении видимости столбца дерева. |
|
| Expand | Событие Expand наступает при разворачивании вершин. | |
| FilterChanged | Событие FilterChanged наступает после фильтрации вершин иерархического дерева. | |
| Finding | Событие Find наступает в начале поиска элемента. | |
| Found | Событие Found наступает, когда найден элемент дерева. | |
| LoadSubNodesOf | Событие LoadSubNodesOf наступает при загрузке вершины в дерево. | |
| MouseDownNode | Событие MouseDownNode наступает при нажатии и удержании клавиши мыши у вершины компонента. | |
| NodeClick | Событие NodeClick наступает при щелчке мыши по элементу списка. | |
| NodeDblClick | Событие NodeDblClick наступает при двойном щелчке мыши по элементу списка. | |
| NodeDrag | Событие NodeDrag наступает во время перетаскивания вершины. | |
| NodeDragEnd | Событие NodeDragEnd наступает при окончании перетаскивания вершины. | |
| NodeDragFinished | Событие NodeDragFinished наступает после помещения вершины в новую позицию. | |
| NodeDragStart | Событие NodeDragStart наступает в начале перетаскивания вершины (в момент нажатия и удержания клавиши мыши). | |
| NodeEditCanceled | Событие NodeEditCanceled наступает при отмене редактирования. | |
| NodeEdited | Событие NodeEdited наступает после редактирования названия вершины. | |
| NodeEditFinish | Событие NodeEditFinish наступает после завершения редактирования вершины иерархического дерева. | |
| NodeEditing | Событие NodeEditing наступает во время редактирования значения в ячейке таблицы. | |
| NodeHovered | Событие NodeHovered наступает при наведении курсора на вершину. | |
| NodeUnHovered | Событие NodeUnHovered наступает, когда с вершины снимается признак того, что на нее наведен курсор. | |
| SelectionChanged | Событие SelectionChanged наступает после выбора элемента. | |
| SelectionChanging | Событие SelectionChanging наступает во время выбора элемента. | |
| Sort | Событие Sort наступает во время сортировки коллекции вершин компонента. | |
| SortChanged | Событие SortChanged наступает после завершения изменения сортировки столбца иерархического дерева. | |
| SortChanging | Событие SortChanging наступает во время изменения сортировки столбца иерархического дерева. | |
| ToolTipShowing | Событие ToolTipShowing наступает, когда курсор мыши наведен на вершину иерархического дерева. |
| Имя свойства | Краткое описание | |
| Свойство Anchors определяет позицию компонента, размещенного внутри контейнера. | ||
| Свойство Animation устанавливает параметры анимации для компонента. | ||
| Bottom | Свойство Bottom устанавливает отступ снизу при размещении компонента внутри LayoutPanel. | |
| Свойство Content устанавливает содержимое компонента. | ||
| Свойство ContextMenu устанавливает контекстное меню для компонента. | ||
| Свойство Data предназначено для хранения любых пользовательских данных. | ||
| DataContext | Свойство DataContext содержит объект с данными. | |
| Свойство Enabled устанавливает, является ли компонент доступным для использования. | ||
| Свойство Height устанавливает высоту компонента. | ||
| Свойство IsResizable определяет, можно ли изменять размеры компонента. | ||
| Свойство IsRTL устанавливает направление текста справа налево. | ||
| Свойство IsVisible определяет, отображается ли компонент. | ||
| Свойство Left устанавливает отступ слева при размещении компонента внутри GridPanel. | ||
| Свойство Offset определяет координаты корневой DOM-вершины элемента управления. | ||
| Свойство Opacity определяет прозрачность компонента. | ||
| Свойство Parent определяет родительский компонент элемента управления. | ||
| Свойство ParentNode устанавливает родительскую DOM-вершину. | ||
| Свойство ResourceKey устанавливает ресурсный ключ для компонента. | ||
| Right | Свойство Right устанавливает отступ справа при размещении компонента внутри LayoutPanel. | |
| Свойство Rotate устанавливает угол поворота компонента. | ||
| Свойство ShowToolTip определяет, включена ли возможность отображать всплывающую подсказку компонента. | ||
| Свойство Style устанавливает стиль для компонента. | ||
| Свойство TabIndex задает последовательность перехода элемента управления внутри контейнера. | ||
| Свойство Tag устанавливает JSON-объект, ассоциированный с компонентом. | ||
| Свойство ToolTip определяет текст всплывающей подсказки компонента. | ||
| Свойство Top устанавливает отступ сверху при размещении компонента внутри GridPanel. | ||
| Свойство Value задает значение компоненту. | ||
| Свойство Width устанавливает ширину компонента. |
| Имя метода | Краткое описание | |
| Метод addClass добавляет CSS-класс к компоненту. | ||
| addEvent | Метод addEvent добавляет обработчик события на DOM-вершину. | |
| addEventHandler | Метод addEventHandler добавляет обработчик события на DOM-вершину. | |
| addEvents | Метод addEvents добавляет массив обработчиков событий на DOM-вершину. | |
| Метод addStateClass добавляет CSS-класс к компоненту и удаляет прежний CSS-класс. | ||
| addStyleBySelector | Метод addStyleBySelector создает блок со стилем с указанным css-селектором. | |
| Метод addToNode добавляет компонент в указанную вершину. | ||
| bindEvents | Метод bindEvents подписывает элемент на все стандартные события. | |
| Метод clearStylesCache очищает кэш стилей компонента. | ||
| Метод getAnchorFlags возвращает JSON-объект с настройками текущей позиции компонента. | ||
| Метод getClass возвращает текущие css-классы компонента. | ||
| Метод getCssStyle возвращает стили для указанной вершины. | ||
| Метод getDomNode возвращает главную DOM-вершину компонента. | ||
| Метод getFocused определяет наличие фокуса у компонента. | ||
| getFunctionByName | Метод getFunctionByName возвращает функцию по имени. | |
| getIsBinded | Метод getIsBinded возвращает признак подписи элемента на события DOM-вершины. | |
| Метод hasClass определяет, задан ли для корневой DOM-вершины элемента управления указанный CSS-класс. | ||
| Метод hide скрывает элемент управления. | ||
| Метод hideToolTip очищает таймаут появления подсказки и скрывает ее, если она был показана. | ||
| Метод isResingNow определяет, изменяются ли в данный момент размеры компонента. | ||
| refreshBindingProperty | Метод refreshBindingProperty обновляет привязанное свойство по имени. | |
| refreshItemsStyle | Метод refreshItemsStyle обновляет CSS-стили дочерних элементов. | |
| refreshStyle | Метод refreshStyle обновляет CSS-стили элемента. | |
| Метод removeClass удаляет CSS-класс из компонента. | ||
| Метод removeEvent удаляет обработчик события у DOM-вершины. | ||
| removeEventHandler | Метод removeEventHandler удаляет обработчик события DOM-вершины. | |
| removeFromDOM | Метод removeFromDOM удаляет вершину из DOM-структуры. | |
| Метод removeStateClasses удаляет CSS-классы компонента. | ||
| Метод setDraggable устанавливает возможность перетаскивания компонента на html-странице. | ||
| Метод setFocus устанавливает фокус компонента. | ||
| Метод setIsHovered отображает компонент как при наведении на него курсора. | ||
| Метод setIsPressed отображает компонент как при клике по нему. | ||
| Метод setOpacityIE8 устанавливает значение прозрачности компонента в браузере InternetExplorer 8. | ||
| Метод setSize устанавливает размеры компонента. | ||
| Метод show отображает элемент управления. | ||
| unBindEvents | Метод unBindEvents отписывает элемент от всех стандартных событий. | |
| Метод updatePosition корректирует размер и положение при абсолютном позиционировании на основе текущих параметров. | ||
| Метод updateSize обновляет размеры компонента подгонке размеров контейнера, в котором находится компонент. |
| Имя события | Краткое описание | |
| Событие Drag наступает при нажатии и удерживании клавиши мыши. | ||
| Событие DragEnd наступает при окончании перетаскивания компонента. | ||
| Событие DragStart наступает, когда начинается перетаскивание компонента. | ||
| Событие OnContextMenu наступает при вызове контекстного меню компонента. | ||
| Событие SizeChanged наступает после изменения размеров компонента. | ||
| Событие SizeChanging наступает во время изменения размеров компонента. |
| Имя свойства | Краткое описание | |
| Свойство Data ассоциирует произвольный объект с данным компонентом. | ||
| Свойство Id устанавливает идентификатор компонента. | ||
| Свойство Settings задает параметры компонента. |
| Имя метода | Краткое описание | |
| Метод clone создает копию объекта. Не реализован в PP.Ui.Control. | ||
| Метод dispose уничтожает компонент. | ||
| Метод getTypeName возвращает имя типа объекта без пространства имён, к которому он принадлежит. |
См. также: