Products

[Cher Toggy]

Thank you for your explanation.

[Cher Toggy]

This issue has been resolved, unrelated to DockingLayout. Thank you!

[Cher Toggy]

Hi Martin,

Thanks for your response. The $refs is empty {} and the $refs.projectGrid is undefined. Somehow the grid is able to recover

REFS: before event.detail.finished block: {} ProjectList.vue:229
REFS Grid: before event.detail.finished block: undefined ProjectList.vue:230
REFS: in event.detail.finished block: {} ProjectList.vue:232
REFS Grid: in event.detail.finished block: undefined ProjectList.vue:233

<Template>
    <smart-grid ref="projectGrid" id="project-grid" @change="recordSelectChange" @dblclick="showSelectedRecordData"   current-user='1'></smart-grid>
</Template>
export default {
  name: "project-list",
  props: {
    
  },
  setup() {
    onMounted(() => {

      window.Smart('#project-grid', class {
        ...
       });
    },
  },
  data(){
  },
  methods: {

    recordSelectChange(event) {
      console.log("REFS: before event.detail.finished block: " + JSON.stringify(this.$refs));
      console.log("REFS Grid : before event.detail.finished block: " + JSON.stringify(this.$refs.projectGrid));
      if (event.detail.finished) {
        console.log("REFS: in event.detail.finished block: " + JSON.stringify(this.$refs));
        console.log("REFS Grid: in event.detail.finished block: " + JSON.stringify(this.$refs.projectGrid));
        this.activeRowId = this.$refs.projectGrid.getSelectedRows()[0][0];
        this.activeRowData = this.$refs.projectGrid.getSelectedRows()[0][1];
      }

    }
  },
};

REFS: before event.detail.finished block: {} ProjectList.vue:229
REFS Grid: before event.detail.finished block: undefined ProjectList.vue:230
REFS: in event.detail.finished block: {} ProjectList.vue:232
REFS Grid: in event.detail.finished block: undefined ProjectList.vue:233
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList2> runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> 8 runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList2> 8 runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> 2 runtime-core.esm-bundler.js:38
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. chunk-vendors.js line 137 > eval:2865:29

However it seems the grid itself somehow operates (responds to events) but every row select and dblClick (which I want to handle) exhibits many instances of the following.

Uncaught (in promise) TypeError: e is undefined
    _setTemplate smart.grid.js:1267
    _render smart.grid.js:1267
    render smart.grid.js:1267
    _renderCell smart.grid.js:1267
    _render smart.grid.js:1267
    render smart.grid.js:1267
    _recycle smart.grid.js:1267
    _refresh smart.grid.js:1267
    _renderColumns smart.grid.js:1267
    propertyChangedHandler smart.grid.js:1267
    updateProperty smart.dockinglayout.js:27
    set smart.dockinglayout.js:27
    6321/</window[n]/< smart.dockinglayout.js:27
    n smart.dockinglayout.js:27
    setup ProjectList.vue:44
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2667

I am not sure if the functionality of the grid is complete and this error is superfluous?

Thank you.

• This reply was modified 2 years, 8 months ago by Cher Toggy.

[Cher Toggy]

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 2 years, 8 months ago by Cher Toggy.

[Cher Toggy]

Hi,

I am also interested in this. I have tried using the https://www.htmlelements.com/docs/docking-layout-custom/ but am unsure where docking rendering fits into Vue lifecycle.

<template>
  <div class="vue-root">
    <smart-docking-layout></smart-docking-layout>
  </div>
</template>

<script>
import "smart-webcomponents/source/modules/smart.dockinglayout.js";
import "smart-webcomponents/source/smart.core.js";
import ProjectList from  "./ProjectList";
import {onMounted} from "vue";
import {createApp} from "vue";

export default {
  name: "top-layout",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ProjectList
  },
  setup() {
    onMounted( function() {

      const docking = document.querySelector("smart-docking-layout");
      docking.layout = [
        {
          type: "LayoutGroup",
          orientation: "horizontal",
          items: [
...
                      //content: '<ProjectList msg="Project List"/>'  // --> option 1: preferred 
                      content: ' <div id="projectListComponentPlace"></div>'  // --> option 2: how to mount into this
              ],
      ];

      const ProjectListComponent = createApp(ProjectList);
      const div = document.getElementById('projectListComponentPlace');

      //this.$refs.projectListComponentPlace.appendChild(div);  // <--- cannot find this ref 
      createApp(ProjectListComponent).mount(div)
    });
  },
}

[Author]

Posts