How to programmatically collapse raddataform "Groups" in Nativescript-vue - nativescript-vue

Question

I'm trying to make use of the RadDataForm using NativeScript-Vue to develop a relatively long form.
My form elements are being defined and grouped programmatically via json. I would like to have the groups start in a minimized / collapsed state for the user experience.
The NativeScript-Vue docs for this feature are very sparse. Angular documentation is deeper so I went there for help, but clicking thru to the "collapsed" API reference results in a 404 from this page.
I'm running it from the Playground to test functionality using the following code:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar">
<ActionItem icon="font://" class="fa" />
<ActionItem icon="font://\uf07a" class="fa" />
</ActionBar>
<RadDataForm :source="person" :metadata="groupMetaData"
#groupUpdate="onGroupUpdate" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
person: {
name: "John",
age: 23,
email: "john#company.com",
city: "New York",
street: "5th Avenue",
streetNumber: 11
},
groupMetaData: {
// propertyGroup: [{
// "Address": {
// 'collapsed' = true,
// },
// // {
// // "Main Info": 'collapsed',
// }
// ],
propertyAnnotations: [{
name: "city",
index: 3,
groupName: "Address",
editor: "Picker",
valuesProvider: [
"New York",
"Washington",
"Los Angeles"
]
},
{
name: "street",
index: 4,
groupName: "Address"
},
{
name: "streetNumber",
index: 5,
editor: "Number",
groupName: "Address"
},
{
name: "age",
index: 1,
editor: "Number",
groupName: "Main Info"
},
{
name: "email",
index: 2,
editor: "Email",
groupName: "Main Info"
},
{
name: "name",
index: 0,
groupName: "Main Info"
}
]
}
};
},
methods: {
onGroupUpdate: function(args) {
let nativeGroup = args.group;
if (args.ios) {
nativeGroup.collapsible = true;
// nativeGroup.collapsed = true;
} else {
nativeGroup.setExpandable(true);
// nativeGroup.collapsed;
// nativeGroup.collapsed(true);
// nativeGroup.collapsed;
}
// console.log(JSON.stringify(nativeGroup));
}
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
My assumption was to address this in the OnGroupUpdate method, but I'm not getting where I need to be (you can see a few attempts that are commented out).
The goal is to have this view load with minimized groups so that the user can expand the different form groups that s/he wishes to work on in sequence.
Playground link: https://play.nativescript.org/?id=XLKFoC&template=play-vue&v=14
Thanks for any help

Answer 1

I think what you actually need is nativeGroup.setIsExpanded(false);
exports.onGroupUpdate = (args) => {
if (app.ios) {
let nativeGroup = args.group;
nativeGroup.collapsible = true;
} else {
let nativeGroup = args.group;
nativeGroup.setExpandable(true);
//in this example i only expand one group.
if (args.groupName !== "SERVICE INFORMATION") {
nativeGroup.setIsExpanded(false)
}
}
}