@digitaldustergmail-com

@digitaldustergmail-com

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • in reply to: ‘Format’ button not rendered #103250
    Cher Toggy
    Participant

    Thank you for your explanation.

    in reply to: Vue Component in LayoutPanel #102984
    Cher Toggy
    Participant

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

    in reply to: Vue Component in LayoutPanel #102982
    Cher Toggy
    Participant

    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 ago by Cher Toggy.
    in reply to: Vue Component in LayoutPanel #102977
    Cher Toggy
    Participant

    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 ago by Cher Toggy.
    in reply to: Vue Component in LayoutPanel #102973
    Cher Toggy
    Participant

    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)
        });
      },
    }
Viewing 5 posts - 1 through 5 (of 5 total)