kendo pivotgrid Rows and Columns expand is always false - kendo-ui

Question

I am trying to save PivotGrid state for future load. I have two problems
1: the expand property of row items is not changed at run time. Test here https://dojo.telerik.com/#Mzand/obIkEdAY : When the user expands an item at runtime the expand property of the returned row by dataSource.rows() is the same as what it was at initialization.
2: I can't find a way to save/load the selected feilds (slices) using the "Fields to Include" menu along side with rows,columns and measures.

Answer 1

I'm working in React but you should be able to do something similar.
This is a bug, to work around it you can listen to expandMember and collapseMember events to manually track the axis and path of expanded rows/columns. see code below.
If you mean the Configurator, just set its dataSource to that of the pivot grid after you create it. See below in createGrid().
Bonus, see the end of createGrid to auto expand the items in the Configurator.
createGrid = () => {
$(`#pivot-grid`).kendoPivotGrid({
dataSource: {
data: data,
schema: schema,
columns: this.state.columns,
rows: this.state.rows,
measures: this.state.measures,
filter: this.state.filter
},
expandMember: this.onExpand,
collapseMember: this.onCollapse
});
let grid = $(`#pivot-grid`).data('kendoPivotGrid');
if (grid) {
if (this.state.expands) {
this.state.expands.forEach(expand => {
if (expand.axis === 'rows') {
grid.dataSource.expandRow(expand.path);
} else {
grid.dataSource.expandColumn(expand.path);
}
});
}
$(`#pivot-config`).kendoPivotConfigurator({
dataSource: grid.dataSource,
filterable: true
});
}
// Expand the items in the configurator fields.
let tree = $('.k-treeview').data('kendoTreeView');
if (tree) {
tree.expand('.k-item');
}
};
onExpand = e => {
this.setState({
expands: [...this.state.expands, {
axis: e.axis,
path: e.path
}]
});
};
onCollapse = e => {
this.setState({
expands: this.state.expands.filter(ex => ex.axis !== e.axis && JSON.stringify(ex.path) !== JSON.stringify(e.path))
});
};

Answer 2

Here is my try on this
what i like is, that it actually updates the data source as you would expect
function onExpandOrCollapseMember(e, expand) {
var pivot = e.sender;
var axisToUpdate = '_' + e.axis;
var field = _.find(pivot.dataSource[axisToUpdate], f => JSON.stringify(f.name) === JSON.stringify(e.path));
field.expand = expand;
}
And on the pivot options i pass in
expandMember: e => onExpandOrCollapseMember(e,true),
collapseMember: e => onExpandOrCollapseMember(e, false),