Настройка редактора колонок

Компонент позволяет настраивать отображение колонок в списке.

Layout/ColumnEditor/Opener — невизуальный компонент—опенер, который открывает панель редактирования колонок списочного компонента с помощью метода open.

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

// TypeScript
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 соответственно.

// TypeScript
this._selectedColumns = ["A", "B"];
this._columnGroups = new RecordSet({
    rawData: groupsData,
    idProperty: 'id'
});

Чтобы редактор отобразился, необходимо вызвать метод open в обработчике клика на кнопку.

// TypeScript
_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;
    });
},