Управление состоянием развернутости узлов

По умолчанию все узлы дерева будет свернуты при инициализации контрола.

События изменения состояния развернутости узлов

При изменении набора развернутых узлов происходит событие expandedItemsChanged.

Пример
Исходный код

При изменении набора свернутых узлов происходит событие collapsedItemsChanged.

Пример
Исходный код

Развернутые узлы при инициализации списка

Чтобы развернуть отдельные узлы дерева при инициализации контрола, передайте в опцию expandedItems массив идентификаторов узлов, которые должны быть развернутыми.

В примере ниже при инициализации развернут узел с id=1.

Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View 
   columns="{{_columns}}"
   displayProperty="title"
   parentProperty="parent"
   nodeProperty="parent@"
   bind:expandedItems="_expandedItems" />
// TypeScript
protected _expandedItems: TExpandOrColapsItems = [1];

Для работы этого функционала необходима дополнительная настройка списочного метода бизнес-логики, с которым работает источник данных контрола. При вызове этого метода в параметре "Фильтр" передается дополнительное поле с именем, которое задано в опции parentProperty. Такое поле содержит массив идентификаторов узлов, заданный в опции expandedItems. Списочный метод должен уметь обрабатывать переданный массив и в ответе возвращать данные по развернутым узлам. Подробнее читайте в статье "Множественная навигация в списочных контролах".

Развернуть все узлы при инициализации дерева

Чтобы развернуть все узлы дерева при инициализации контрола, передайте в опцию expandedItems массив, содержащий один элемент — null. В этом случае предполагается, что все данные будут загружены сразу.

<!-- WML -->
<Controls.treeGrid:View 
   columns="{{_columns}}"
   displayProperty="title"
   parentProperty="parent"
   nodeProperty="parent@"
   expandedItems="{{[null]}}" />

Для работы этого функционала необходима дополнительная настройка списочного метода бизнес-логики, с которым работает контрол. Подробнее написано в примечании в предыдущем пункте.

Свернуть отдельные узлы при инициализации дерева

Чтобы свернуть отдельные узлы при инициализации контрола, в опции expandedItems установите значение [null], а в опции collapsedItems — массив идентификаторов таких узлов.

В следующем примере свернут узел с id=1, а остальные - развернуты.

Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   bind:expandedItems="_expandedItems"
   bind:collapsedItems="_collapsedItems"/>
// TypeScript
protected _collapsedItems: TExpandOrColapsItems = [1];
protected _expandedItems: TExpandOrColapsItems = [null];

Для работы этого функционала необходима дополнительная настройка списочного метода бизнес-логики, с которым работает контрол. Подробнее написано в примечании в предыдущем пункте.

Развертывание узлов кликом по элементу

По умолчанию узел разворачивается только кликом по кнопке-экспандеру. Чтобы узел разворачивался кликом по элементу, в опции expandByItemClick установите значение true.

В примере ниже узлы списка разворачиваются кликом по элементу.

Пример
Исходный код
<!-- WML -->
<Controls.treeGridNew:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   expandByItemClick="{{true}}" />

Режим единого развернутого узла

Настройка режима единого развернутого узла выполняется аналогично дереву.

В примере ниже единовременно можно развернуть только один узел в верхнем уровне иерархии.

Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="type"
   singleExpand="{{true}}" />

Перезагрузка дерева с сохранением развернутых узлов

Чтобы сохранить развернутость узлов после перезагрузки, необходимо задать опцию deepReload.

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   navigation="{{_navigation}}"
   deepReload="{{true}}" />