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

Запуск редактирования по месту

Для запуска редактирования по месту из кода используется метод beginEdit(). При вызове метода необходимо в качестве аргумента передавать объект со свойством item (см. Types/entity:Model) — запись, которая будет запущена на редактирование. Также можно настроить шаблон отображения пустой таблицы, стилизовав его под редактируемую запись. Подробнее читайте здесь.

Запуск редактирования по месту с расширенным форматом полей записи

Формат полей редактируемой записи может отличаться от формата полей Types/Collection:RecordSet, отображаемый списком. Это используется в задачах со специфичным шаблоном редактирования по месту, который позволяет редактировать больше полей, чем содержится в формате Types/Collection:RecordSet. Часто этот функционал используется как альтернатива диалогу редактирования.

Чтобы поддержать описанный функционал, необходимо:

1. Из обработчика события beforeBeginEdit вернуть item с расширенным форматом полей.
2. Корректно обработать item:
   • В Types/Collection:RecordSet списка сохранить только отображаемые поля.
   • В источнике данных списка полностью сохранить item.

Запуск редактирования по месту для конкретной ячейки

Когда в контроле включен режим редактирования ячеек, при вызове метода beginEdit() в параметре columnIndex можно задать индекс ячейки, запускаемой на редактирование.

// TypeScript
_beginEdit(): void {
   this._children.grid.beginEdit({
      item: this._children.grid.getItems().at(1),
      columnIndex: 2
   });
}

<!-- WML -->
<Controls.grid:View name="grid" source="{{_viewSource}}" columns="{{_columns}}">
   <ws:editingConfig>
      <ws:Object mode="cell" editOnClick="{{true}}"/>
   </ws:editingConfig>
   <ws:footerTemplate>
      <ws:partial template="Controls/grid:FooterTemplate">
            <ws:contentTemplate>
               <div>
                  <a href="#"
                     class="controls-text-link controlsDemo-beginEdit-grid-excel-editing"
                     on:click="_beginEdit()">Начать редактирование третей ячейке второй записи</a>
               </div>
            </ws:contentTemplate>
      </ws:partial>
   </ws:footerTemplate>
</Controls.grid:View>

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

Для запуска добавления по месту из кода используется метод beginAdd(). При вызове метода в его аргумент можно передать объект со свойством item (см. Types/entity:Model) — начальные данные для создаваемого элемента. По умолчанию метод вызывается без начальных данных.

Запуск добавления по месту с выбором позиции для создаваемого элемента

Позиция отображения строки добавления по месту задается в опции editingConfig в свойстве addPosition. По умолчанию строка добавления отображения в конце списка, группы или узла (для контролов дерево, плитка и иерархический проводник).

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

<!-- WML -->
<Controls.list:View name="list" source="{{_viewSource}}">
   <ws:editingConfig
      editOnClick="{{true}}"
      addPosition="top"/>
   <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>

Чтобы создать элемент внутри группы, необходимо при вызове метода beginAdd() в item задать значение для поля группировки (см. groupProperty). В следующем примере в списке с группировкой можно создавать новые элементы внутри групп.

<!-- WML -->
<Controls.list:View
   name="list"
   source="{{_viewSource}}"
   on:beforeBeginEdit="_onBeforeBeginEdit()"
   groupingKeyCallback="{{_groupingKeyCallback}}"
   editingConfig="{{_editingConfig}}">
   <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>
   <ws:footerTemplate>
      <Controls.list:AddButton caption="Add record" on:click="_beginAdd()" />
   </ws:footerTemplate>
</Controls.list:View>

// TypeScript
import {groupConstants as constView} from 'Controls/list';

private _groupingKeyCallback(item: Model): string {
    const groupId = item.get('brand');
    return groupId === 'apple' ? constView.hiddenGroup : groupId;
}

protected _onBeforeBeginEdit(
    e: SyntheticEvent<null>,
    options: { item?: Model },
    isAdd: boolean): Promise<{item: Model}> | void {
    if (!isAdd) {
        this._activeGroup = this._groupingKeyCallback(options.item);
        return;
    }
}

protected _beginAdd(): void {
    const item = new Model({
        keyProperty: 'id',
        rawData: {
            id: ++this._fakeItemId,
            title: '',
            brand:  this._activeGroup || 'asd'
        }
    });
    this._children.list.beginAdd({item});
}

Чтобы создать элемент внутри узла, необходимо при вызове метода beginAdd() в item задать значение для поля родительской записи (см. parentProperty).

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

Когда в контроле включен режим редактирования ячеек, при вызове метода beginAdd() в параметре columnIndex можно задать индекс ячейки, запускаемой на редактирование при добавлении по месту.

// TypeScript
_addRecord(): void {
   this._children.grid.beginAdd({columnIndex: 3});
}

<!-- WML -->
<Controls.grid:View name="grid" source="{{_viewSource}}" columns="{{_columns}}">
   <ws:editingConfig>
      <ws:Object mode="cell" editOnClick="{{true}}"/>
   </ws:editingConfig>
   <ws:footerTemplate>
      <ws:partial template="Controls/grid:FooterTemplate">
            <ws:contentTemplate>
               <div>
                  <a href="#"
                     class="controls-text-link controlsDemo-beginAdd-grid-excel-editing"
                     on:click="_addRecord()">Начать добавление записи, редактирование начнется с последней ячейки</a>
               </div>
            </ws:contentTemplate>
      </ws:partial>
   </ws:footerTemplate>
</Controls.grid:View>

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

Для завершения редактирования или добавления по месту с сохранением данных используется метод commitEdit(), а для завершения без сохранения данных — метод cancelEdit().

В следующием примере показно использование метода commitEdit().

В следующием примере показно использование метода cancelEdit().