Шаблон отображения элемента

Для отображения элементов дерева используется базовый шаблон Controls/treeGrid:ItemTemplate. Настройка шаблона выполняется аналогично таблице. Контент задаётся не в шаблоне элемента, а в шаблоне отображения ячеек колонки.

Ниже приведен пример установки пользовательского шаблона и передачи в него параметра clickable.

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

Установка пользовательского шаблона из WML-файла

Поддерживается возможность задать пользовательский шаблон отображения элемента дерева из отдельного wml-файла. Настройка выполняется аналогично плоскому списку.

В следующем примере контрол и шаблон настроены в отдельных WML-файлах:

<!-- file1.wml -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type">
   <ws:itemTemplate>
      <ws:partial template="wml!file2" scope="{{itemTemplate}}"/>
   </ws:itemTemplate>
</Controls.treeGrid:View>
<!-- file2.wml -->
<ws:partial template="Controls/treeGrid:ItemTemplate" expanderSize="xl" />

Конфигурация пользовательского шаблона

Расширенная настройка шаблона отображения элементов дерева выполняется аналогично плоскому списку. При использовании примеров из приведенных ниже статей не забывайте, что Controls.list:View необходимо заменить на Controls.treeGrid:View, а Controls/list:ItemTemplate — на Controls/treeGrid:ItemTemplate.

Для шаблона можно настроить:

Отображение элемента с фото

Ниже приведена инструкция о встраивании картинок в первую колонку элемента дерева. Она позволяет избежать проблем с выравниваением встроенных картинок и отображаемого текста колонки по единой линии.

В следующем примере в шаблон отображения первой колонки встроена картинка размером 32x32 px.

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

Для отображения элемента с фото выполните следующее:

  1. В конфигурации пользовательского шаблона отображения элемента установите значение для параметра expanderSize. Для фото размерами 16x16 px опцию expanderSize установите в значение "s", для 24x24 px — "m", для 32x32 px — "l", а для 40x40 px — "xl".
<!-- WML -->
<Controls.treeGrid:View
   attr:class="demoTreeWithProto__treeGrid32"
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type">
   <ws:itemTemplate>
      <ws:partial template="Controls/treeGrid:ItemTemplate"
         expanderSize="l"
         scope="{{ itemTemplate }}" />
   </ws:itemTemplate>
</Controls.treeGrid:View>
  1. В опции columns установите пользовательский шаблон отображения колонки, в который поместите вёрстку с выводом фотографии.
// TypeScript
import * as CntTpl from 'wml!Controls-demo/treeGridNew/ItemTemplate/WithPhoto/content';
 
protected _columns: TColumns = [
    { displayProperty: 'title', template: CntTpl},
    { displayProperty: 'rating', width: '' },
    { displayProperty: 'country', width: ''}
];
<!-- content.wml -->
<ws:partial template="Controls/grid:ColumnTemplate" scope="{{_options}}" attr:class="controls-Grid__row-cell__content_baseline_L">
   <ws:contentTemplate>
      <img attr:class="demoTreeWithProto__imageBlock" src="{{item.contents.photo}}"/>
      <span>{{item.contents.title}}</span>
   </ws:contentTemplate>
</ws:partial>