Настройка редактора колонок
Контрол позволяет настраивать отображение колонок в списке.
Layout/ColumnEditor/Opener — невизуальный контрол—опенер, который открывает панель редактирования колонок списочного контрола с помощью метода open.
Для настройки необходимо задать следующие исходные данные: заголовки, данные колонок, группы колонок.
// JavaScript
var headersData = [
{caption: 'Id', startRow: 2, endRow: 3, startColumn: 1, endColumn: 2},
{caption: 'Title', startRow: 2, endRow: 3, startColumn: 2, endColumn: 3},
{caption: 'Id & Title', startRow: 1, endRow: 2, startColumn: 1, endColumn: 3},
{caption: 'Owner & Department', startRow: 1, endRow: 2, startColumn: 3, endColumn: 5 },
];
var columnsData = [
{width: 'auto', displayProperty: 'id'},
{width: 'auto', displayProperty: 'title'},
{width: 'auto', displayProperty: 'department'},
];
var groupsData = [
{id: 'A', title: 'Id', fixed: true, columnConfig: [columnsData[0]]},
{id: 'B', title: 'Title', fixed: false, columnConfig: [columnsData[1]]},
{id: 'C', title: 'Owner & Department', fixed: false, columnConfig: [columnsData[2], columnsData[3]]},
{id: 'D', title: 'Some Field', fixed: false, columnConfig: [columnsData[4]]}
];
Инициализируйте перед оживлением начальные выбранные колонки и группы колонок в переменных _selectedColumns
и _columnGroups
соответственно.
// JavaScript
this._selectedColumns = ["A", "B"];
this._columnGroups = new RecordSet({
rawData: groupsData,
idProperty: 'id'
});
Чтобы редактор отобразился, необходимо вызвать метод open
в обработчике клика на кнопку.
// JavaScript
_openColumnEditor: function() {
this._children.columnEditorOpener.open({
columns: this._columnGroups,
selectedColumns: this._selectedColumns,
header: headersData
}).then((res) => {
this._selectedColumns = res.selected;
this._columns = res.columns;
this._header = res.header;
});
},