Шаблон редактирования по месту

Шаблон редактирования используется для настройки отображения элемента в режимах редактирования и добавления по месту, а также в режиме просмотра (когда не запущено ни редактирование, ни добавление).

В следующем примере задан пользовательский шаблон редактирования, где в качестве контрола редактора используется поле ввода текста.

Для настройки пользовательского шаблона редактирования обязателен вызов базового шаблона, например Controls/list:EditingTemplate. Другие виды шаблонов описаны здесь.

При работе с контролами плоский список и плитка пользовательский шаблон редактирования задается в шаблоне отображения элемента.

<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate" />
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

При работе с контролами таблица, дерево и иерархический проводник пользовательский шаблон редактирования задается в шаблоне отображения ячейки.

<!-- WML -->
<Controls.grid:View
   source="{{_viewSource}}"
   columns="{{_columns}}" />
// TypeScript
protected _columns: = [{displayProperty: 'title', template: 'wml!cellEditor'}]
<!-- cellEditor.wml -->
<ws:partial template="Controls/grid:ColumnTemplate">
   <ws:contentTemplate>
      <ws:partial template="Controls/list:EditingTemplate" />
   </ws:contentTemplate>
</ws:partial>

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

<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate">
               <ws:editorTemplate>
                  <Controls.input:Text bind:value="itemTemplate.item.contents.title"/>
               </ws:editorTemplate>
            </ws:partial>
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

В опции value задается строка, отображаемая в режиме просмотра.

<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate"
               value="{{itemTemplate.item.contents.title}}">
               <ws:editorTemplate>
                  <Controls.input:Text bind:value="itemTemplate.item.contents.title"/>
               </ws:editorTemplate>
            </ws:partial>
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

Виды шаблонов редактирования

Существует следующие виды шаблонов редактирования:

  1. Controls/list:EditingTemplate используется для редактирования большинства типов данных элемента, кроме денежных и числовых.
  2. Controls/list:MoneyEditingTemplate используется для редактирования денежных данных элемента. В режиме просмотра отображаемое значение оборачивается в декоратор денег.
  3. Controls/list:NumberEditingTemplate используется для редактирования числовых данных элемента. В режиме просмотра отображаемое значение оборачивается в декоратор чисел.

В следующем примере показано использование всех видов шаблонов.

<!-- moneyEditor.wml -->
<ws:partial template="Controls/grid:ColumnTemplate" scope="{{ _options }}">
   <ws:contentTemplate>
      <ws:partial template="Controls/list:MoneyEditingTemplate"
         value="{{ item.contents.taxBase }}"
         scope="{{ contentTemplate }}"
         enabled="{{true}}">
         <ws:editorTemplate>
            <Controls.input:Money bind:value="item.contents.taxBase" selectOnClick="{{false}}" />
         </ws:editorTemplate>
      </ws:partial>
   </ws:contentTemplate>
</ws:partial>
<!-- WML -->
<Controls.grid:View
   name="grid"
   source="{{ _viewSource }}"
   header="{{ _header }}"
   columns="{{ _columns }}">
   <ws:editingConfig editOnClick="{{true}}" autoAdd="{{true}}"/>
</Controls.grid:View>
// TypeScript
protected _columns: = [{displayProperty: 'taxBase', template: 'wml!moneyEditor'}]

Подсветка контрола-редактора при наведении курсора мыши

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

В следующем примере подсветка включена.

<!-- WML -->
<Controls.list:View name="list" source="{{_viewSource}}">
   <ws:editingConfig editOnClick="{{true}}"/>
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate"
               value="{{ itemTemplate.item.contents.title }}"
               enabled="{{true}}">
               <ws:editorTemplate>
                  <Controls.input:Text bind:value="itemTemplate.item.contents.title"/>
               </ws:editorTemplate>
            </ws:partial>
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

Размер текста в режиме просмотра

Размер шрифта текста, который отображается внутри элемента в режиме просмотра, задается в опции size.

В следующем примере задан размер шрифта "l".

<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:editingConfig editOnClick="{{true}}"/>
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate"
               value="{{ itemTemplate.item.contents.title }}"
               size="l">
               <ws:editorTemplate>
                  <Controls.input:Text bind:value="itemTemplate.item.contents.title"/>
               </ws:editorTemplate>
            </ws:partial>
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

Отменить запуск редактирования по месту при клике на определенную область элемента

По умолчанию редактирование элемента начинается при клике по любой области внутри такого элемента. Чтобы не начинать редактирование при клике по конкретной области элемента, необходимо в шаблоне отображения установить CSS-класс js-controls-ListView__notEditable для корневого тега такой области.

В следующем примере показано использование CSS-класса.

<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:editingConfig editOnClick="{{true}}" />
   <ws:itemTemplate>
      <ws:partial template="Controls/list:ItemTemplate">
         <ws:contentTemplate>
            <ws:partial template="Controls/list:EditingTemplate">
               <div class="js-controls-ListView__notEditable">
                  <!-- Эта область не будет начинаться редактирование по месту-->
               </div>
            </ws:partial>
         </ws:contentTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.list:View>

Цвет фона элемента в режиме редактирования

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

В следующем примере цвет фона контрола-редактора в режиме редактирования установлен в значение "primary".

<!-- WML -->
<Controls.grid:View source="{{_viewSource}}" columns="{{_columns}}">
   <ws:editingConfig editOnClick="{{true}}" backgroundStyle="primary"/>
</Controls.grid:View>

В режиме редактирования элемента для опций записи автоматически устанавливается CSS-класс с именем:

controls-itemActionsV_editing_{{<value>}}
где <value> — это значение, которое передано в опцию editingConfig.backgroundStyle. С помощью этого CSS-класса можно изменить цвет фона опций записи в режиме редактирования. Для этого в CSS-файле контрола создайте одноименный CSS-класс, в котором определите цвет фона опций записи.

Редактирование строки

Режим редактирования по месту, который позволяет редактировать данные выбранного элемента таблицы без деления на колонки. Для настройки этого режима сделайте следующее:

  1. Установите значение для опции colspanCallback.
  2. Внутри шаблона ячейки вызовите шаблон редактирования Controls/list:EditingTemplate.

В следующем примере настроено редактирование строки.

<!-- WML -->
<Controls.grid:View 
   source="{{_viewSource}}" 
   columns="{{_columns}}"
   colspanCallback="{{ _colspanCallback }}" />
<!-- baseEditor.wml -->
<ws:partial template="Controls/grid:ColumnTemplate">
   <ws:contentTemplate>
      <ws:partial template="Controls/list:EditingTemplate">
         <ws:editorTemplate>
            <Controls.input:Text bind:value="itemTemplate.item.contents.title" />
         </ws:editorTemplate>
         <ws:viewTemplate>
            Custom title: {{item.contents.title}}.
         </ws:viewTemplate>
      </ws:partial>
   </ws:contentTemplate>
</ws:partial>
protected _columns: = [{displayProperty: 'total', template: 'wml!baseEditor'}];
protected _colspanCallback(item, column, columnIndex, isEditing) {
    return isEditing ? 'end' : undefined;
}

В случаях, когда конфигурация колонок заранее неизвестна (например, ее получают из родительского контрола), задайте пользовательский шаблон в опции itemEditorTemplate, при установке которого обязателен вызов шаблона Controls/grid:ItemEditorTemplate.

В следующем примере настроено редактирование строки.

<!-- WML -->
<Controls.grid:View source="{{_viewSource}}" columns="{{_columns}}">
   <ws:editingConfig editOnClick="{{true}}" />
   <ws:itemEditorTemplate>
      <ws:partial scope="{{itemEditorTemplate}}" 
         template="Controls/grid:ItemEditorTemplate">
        <Controls.input:Text contrastBackground="{{true}}"
            bind:value="itemEditorTemplate.item.contents.title"/>
      </ws:partial>
   </ws:itemEditorTemplate>
</Controls.grid:View>