Войти

Кнопка-экспандер узла

По умолчанию кнопка-экспандер отображается для всех узлов (скрытых узлов) дерева.

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

Отображение кнопки-экспандера только при наличии дочерних элементов

Чтобы настроить отображение кнопки-экспандера только при наличии дочерних элементов, сделайте следующее:

  1. В опции expanderVisibility задайте значение "hasChildren".
  2. В опции hasChildrenProperty укажите имя поля записи, которое содержит информацию о наличии дочерних элементов.
  3. В конфигурации источника данных для каждого узла задайте поле с именем, которое указано в опции hasChildrenProperty. Если для узла есть дочерние элементы, то задайте в таком поле значение true, иначе — false.

В примере ниже кнопка-экспандер отображается только для узлов с дочерними элементами.

Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   bind:expandedItems="_expandedItems"
   expanderVisibility="hasChildren"
   hasChildrenProperty="hasChild" />
// TypeScript
import {Control} from 'UI/Base';
import {HierarchicalMemory} from 'Types/source';

export default class MyClass extends Control {
   protected _viewSource: HierarchicalMemory;
   protected _beforeMount(): void {
      this._viewSource = new Memory({
         keyProperty: 'key',
         data = [
               { key: 1, title: 'Node', Раздел: null, 'Раздел@': true, Раздел$: null, hasChild: true },
               { key: 11, title: 'Node', Раздел: 1, 'Раздел@': true, Раздел$: null },
         ];
      });
   }
}

Иконка узла

По умолчанию для узлов и скрытых узлов используются различные иконки для кнопки-экспандера.

Иконку кнопки-экспандера можно установить двумя способами:

При этом опция expanderIcon на шаблоне отображения элемента приоритетнее, чем expanderIcon на контроле.

В следующем примере для всех узлов и скрытых узлов дерева используется иконка "скрытый узел". Иконка кнопки-экспандера установлена с помощью опции expanderIcon на контроле.

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   expanderIcon="hiddenNode" />

В следующем примере установлена иконка скрытого узла для элементов, где поле "Раздел" принимает значение 1. Иконка кнопки-экспандера установлена с помощью опции expanderIcon на шаблоне отображения элемента.

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@">
   <ws:itemTemplate>
      <ws:partial template="Controls/treeGrid:ItemTemplate"
         expanderIcon="{{itemTemplate.item.contents['Раздел'] === 1 ? 'hiddenNode'}}" />
   </ws:itemTemplate>
</Controls.treeGrid:View>

Позиционирование кнопки-экспандера

Позиционирование кнопки-экспандера задается в опции expanderPosition. По умолчанию "default" — отображение в первой колонке слева от значения.

Для позиционирования кнопки-экспандера справа от значения установите в опции expanderPosition значение "right". В следующем примере показана эта настройка.

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

Для позиционирования кнопки-экспандера в произвольном месте элемента, сделайте следующее:

  1. В опции expanderPosition установите значение "custom".
  2. В пользовательском шаблоне отображения ячейки колонки в опции contentTemplate укажите позицию для отображения кнопки-экспандера. Для этого поместите директиву ws:partial и в качестве встраиваемого шаблона укажите expanderTemplate.
Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   expanderIcon="emptyNode"
   expanderPosition="custom"/>
<!-- content.wml -->
<ws:partial template="Controls/grid:ColumnTemplate" attr:class="controls-Grid__row-cell__content_baseline_XL"
            scope="{{_options}}">
    <ws:contentTemplate>
        <span>{{item.contents['title']}}</span>
        <ws:partial template="{{ template.expanderTemplate }}" />
    </ws:contentTemplate>
</ws:partial>

Размер области кнопки-экспандера

Размер области кнопки-экспандера используется при настройке отображения элемента с фото, о чем подробнее можно прочитать здесь.

Размер области кнопки-экспандера можно установить двумя способами:

При этом опция expanderSize на шаблоне элемента приоритетнее, чем expanderSize на контроле.

В случае, если для разных элементов дерева заданы разные значения опции, то для корректного выравнивания подвалов узлов необходимо продублировать опцию в конфигурации шаблона отображения подвала узла.

В следующем примере для всех узлов и скрытых узлов дерева установлен размер области кнопки-экспандера, равный "l". Размер области кнопки-экспандера установлен с помощью опции expanderSize на контроле.

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   expanderSize="l" />

В следующем примере установлен размер области кнопки-экспандера, равный "l" для элементов, где поле "Раздел" принимает значение 1. Размер области кнопки-экспандера установлен с помощью опции expanderSize на шаблоне отображения элемента.

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type">
   <ws:itemTemplate>
      <ws:partial template="Controls/treeGrid:ItemTemplate"
         expanderSize="{{itemTemplate.item.contents['Раздел'] === 1 ? 'l'}}" />
   </ws:itemTemplate>
</Controls.treeGrid:View>

Без отступов

Кнопка-экспандер всегда отображется с отступом от соседних элементов строки. Удаление отступов возможно только при условии скрытия иконки кнопки-экспандера. Для этого необходимо в конфигурации контрола в опции expanderIcon установить значение "none".

<!-- WML -->
<Controls.tree:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   expanderIcon="none" />

Размер иконки узла

Для уменьшения размера иконки разворота узла нужно указать на списке или шаблоне опцию expanderIconSize, равную значению 2xs.

<!-- WML -->
<Controls.tree:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   expanderIconSize="2xs" />

Цвет иконки узла

Чтобы цвет иконки узла сделать неакцентным, нужно на списке или шаблоне задать опцию expanderIconStyle со значением unaccented. Значением по умолчанию является default.

<!-- WML -->
<Controls.tree:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="Раздел"
   nodeProperty="Раздел@"
   expanderIconStyle="unaccented" />
© 2023 Тензор. Все права защищены.