Управление редактированием и добавлением по месту из кода
Запуск редактирования по месту
Для запуска редактирования по месту из кода используется метод beginEdit(). При вызове метода необходимо в качестве аргумента передавать объект со свойством item
(см. Types/entity:Model) — запись, которая будет запущена на редактирование. Также можно настроить шаблон отображения пустой таблицы, стилизовав его под редактируемую запись. Подробнее читайте здесь.
При запуске и завершении редактирования по месту происходят события. Подробнее читайте здесь.
Если из обработчика события beforeBeginEdit возвращается запись, то именно она будет запущена на редактирование вместо item
. Подробнее о работе с событиями читайте здесь.
Запуск редактирования по месту с расширенным форматом полей записи
Формат полей редактируемой записи может отличаться от формата полей Types/Collection:RecordSet, отображаемый списком. Это используется в задачах со специфичным шаблоном редактирования по месту, который позволяет редактировать больше полей, чем содержится в формате Types/Collection:RecordSet. Часто этот функционал используется как альтернатива диалогу редактирования.
Чтобы поддержать описанный функционал, необходимо:
- Из обработчика события beforeBeginEdit вернуть
item
с расширенным форматом полей. - Корректно обработать
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().
При запуске и завершении редактирования по месту происходят события. Подробнее читайте здесь.
Также завершить редактирование и добавление по месту можно из кнопкой на панели опций записи или с помощью клавиш.