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

• This reply was modified 3 years, 7 months ago by Cher Toggy.