JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Vue Component in LayoutPanel › Reply To: Vue Component in LayoutPanel
March 22, 2022 at 3:44 pm
#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, 8 months ago by Cher Toggy.