Hi Martin,
Thank you for your response. With your example, I am now able to render the custom element with a smart-grid inside. However, it seems that the custom element cannot find it’s references any longer. Am I incorrectly mounting the Vue element? Thanks!
TopLayout.vue:
<smart-docking-layout ref="workspaceDockingLayout"></smart-docking-layout>
...
items: [
{
id: "tabGrid",
label: "Project List",
content: '<div id="pList"></div>'
}
]
...
mounted() {
docking.whenRendered( function(){
const ProjectListComponent = createApp(ProjectList);
ProjectListComponent.mount("#pList");
})
}
[Vue warn]: Unhandled error during execution of native event handler at <ProjectList> 9 runtime-core.esm-bundler.js:38
Uncaught TypeError: this.$refs.projectGrid is undefined
recordSelectChange ProjectList.vue:230
1 ProjectList.vue:7
ProjectList.vue:230
ProjectList.vue:7
<smart-grid ref="projectGrid" id="project-grid" @change="recordSelectChange" @dblclick="showSelectedRecordData"></smart-grid>
ProjectList:230:
recordSelectChange(event) {
if (event.detail.finished) {
this.activeRowId = this.$refs.projectGrid.getSelectedRows()[0][0];
this.activeRowData = this.$refs.projectGrid.getSelectedRows()[0][1];
}
}
then cascades errors to all events pertaining to smart.grid.js:
Uncaught (in promise) TypeError: e is undefined
_setTemplate smart.grid.js:1267
_render smart.grid.js:1267
render smart.grid.js:1267
Update: I have confirmed refs to ProjectListComponent are still available in TopLayout.vue:
...
docking.whenRendered( function(){
const ProjectListComponent = createApp(ProjectList);
const mounted = ProjectListComponent.mount("#pList");
console.log(mounted.$refs);
})
...
Proxy {showSelectedRoecordDetailW: smart-button#button2991.item.primary.smart-element.smart-button, projectGrid: smart-grid#project-grid.smart-element.smart-grid, rowCommandMenu: smart-menu#rowCommandMenu.smart-element.smart-menu.smart-visibility-hidden, rowDetailW: smart-window#window083a.smart-element.smart-window}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false
