Vue web component from dashboard layout

[Sahan Weerakoon]

I am planning to use dashboard layout code in multiple projects. So I decided to use web components. When I create the web component, the drag and drop functionality does not work. 

[Shalini Maragathavel]

Hi Sahan, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you are facing an issue in drag and drop functionality of Dashboard Layout component. So, we have prepared a Dashboard Layout sample and tried to reproduce the issue. But we did not face the mentioned issue at our end as the drag and drop functionality is working properly in Dashboard Layout. 

We have attached our validated sample for your reference.

Sample: https://codesandbox.io/s/vue-template-forked-v3kgd?file=/src/App.vue 

If your reported problem persists, then please share the following information to validate further. 

• If possible, replicate your reported problem in the above sample or provide a simple sample or steps to replicate the issue.
• Elaborate on the issue in detail with exact environment(Vue web component) and pictorial representation or any reference links to understand your scenario better.
• Share your complete Dashboard Layout rendering code.
• Syncfusion package version and Vue version.

 

This information would help us to find the exact cause of your reported problem and to provide the prompt solution. 

Regards,  

Shalini M. 

[Sahan Weerakoon]

Hi Shalini,

I am really sorry for the non specified question. Let me explain the steps.

1) Create Vue project and implement the dashboard layout

package.json

{

"name": "syncfusion-layouts",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build"

},

"dependencies": {

"@syncfusion/ej2-vue-charts": "^19.3.45",

"@syncfusion/ej2-vue-layouts": "^19.3.44",

"core-js": "^3.6.5",

"vue": "^2.6.11",

"vue-class-component": "^8.0.0-rc.1"

},

"devDependencies": {

"@vue/cli-plugin-babel": "~4.5.0",

"@vue/cli-service": "~4.5.0",

"node-sass": "^4.12.0",

"sass-loader": "^8.0.2",

"vue-template-compiler": "^2.6.11"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not dead"

]

}

App.vue

<template>

<div>

<div class="control-section">

<ejs-dashboardlayout id='defaultLayout' :cellSpacing="spacing" :columns="6">

<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">

<div class="e-panel-container">

<div class="text-align">

<div>0div>

div>

div>

div>

<div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">

<div class="e-panel-container">

<div class="text-align">

<div>1div>

div>

div>

div>

<div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">

<div class="e-panel-container">

<div class="text-align">

<div>2div>

div>

div>

div>

<div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">

<div class="e-panel-container">

<div class="text-align">

<div>3div>

div>

div>

div>

<div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">

<div class="e-panel-container">

<div class="text-align">

<div>4div>

div>

div>

div>

<div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">

<div class="e-panel-container">

<div class="text-align">

<div>5div>

div>

div>

div>

<div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">

<div class="e-panel-container">

<div class="text-align">

<div>6div>

div>

div>

div>

<div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">

<div class="e-panel-container">

<div class="text-align">

<div>7div>

div>

div>

div>

ejs-dashboardlayout>

div>

div>

template>

<script>

import Vue from "vue";

// Import syncfusion dashboardlayout component from layouts package

import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";

Vue.use(DashboardLayoutPlugin);

export default {

data: function() {

return {

count: 8,

spacing: [10,10]

};

}

}

script>

<style>

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

/* DashboardLayout element styles */

#defaultLayout .e-panel .e-panel-container {

vertical-align: middle;

font-weight: 600;

font-size: 20px;

text-align: center;

}

.text-align {

line-height: 80px;

}

#defaultLayout .e-panel {

transition:none !important;

}

style>

main.js

import Vue from 'vue'

import App from './App.vue'

import wrap from "@vue/web-component-wrapper";

const wrappedElement = wrap(Vue, App);

Vue.config.productionTip = false

window.customElements.define("dashboard-layout", wrappedElement);

new Vue({

render: h => h(App),

}).$mount('#app')

( When I run the above project I get the dashboard layout. That works fine. )

2) Create web component

i) go to root of the vue project through CMD

ii) create the web component from App

3) use the dashboard-layout.min.js created above, in an html file to use

I get my issue here. Following screen shot is my issue (styling and drag and drop functionality doesnt work)

Can you please use vue cli if you create a sample

[Indhumathy Loganathan]

Hi Sahan, 

 

We have prepared a Vue-cli sample based on the shared steps. We can replicate the issue at our end but we need some additional time to validate on this issue further. We will update you further details on 21st October, 2021. 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Sharon Sanchez Selvaraj]

Hi Sahan, 

 

Sorry for the inconvenience. 

 

Currently we are validating on the scenario(“Drag and Drop functionality doesn’t work with Vue web components”) with the provided sample details, and we need some additional time to analyze on this. We will validate and update you further details on or before October 27^th, 2021. 

 

We appreciate your patience. 

 

Regards, 

Sharon Sanchez S. 

[Sahan Weerakoon]

Hi Sharon,

Thank you very much for your support. In case creating web components does not work out, can you please suggest me any other method to use the same code of dashboard layout(including charts) to use in multiple projects. 

Regards,

Sahan Weerakoon

[Indhumathy Loganathan]

Hi Sahan, 

 

We have validated your reported query in Dashboard Layout component. In Vue, you can recall the page inside multiple pages just by specifying its tag. Check the below code snippet. 

 

[Hello.Vue] 

 

<template> 

  <dashboard /> 

</template> 

 

<script> 

import Dashboard from "./Dashboard"; 

export default { 

  name: "hello", 

  components: { 

    dashboard: Dashboard, 

  }, 

}; 

</script> 

 

[Goodbye.Vue] 

<template> 

  <dashboard /> 

</template> 

 

<script> 

import Dashboard from "./Dashboard"; 

export default { 

  name: "hello", 

  components: { 

    dashboard: Dashboard, 

  }, 

}; 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169662/ze/quickstart-957670703 

 

We have rendered the complete Dashboard Layout component code inside the Dashboard.Vue page. However for the Dashboard Layout component issue in web component, we identified that the reported issue occurrs due to the missing layout style customization. Currently we are validating on this issue, as mentioned earlier we will update you further details within the mentioned date. 

 

Please check whether the shared solution meet your requirement and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L  

[Sahan Weerakoon]

Hi Indhumathy,

According to the way I understood you described how to include a component within another component. What I need is to include the component in a different project.​ 

Any updates on the web components? My apologies for bothering you guys like this.

Regards,

Sahan Weerakoon.

[Indhumathy Loganathan]

Hi Sahan, 

 

Sorry for the delay. 

 

As mentioned earlier, we have validated the issue with priority and found the root cause. The reported issue occurs due to rendering of Dashboard Layout component within the custom HTML Shadow DOM (dashboard-layout). In Shadow root element, the document related query selectors like document.getElementById(), document.querySelectorAll() returns null value since it is not available within the original Root DOM element. By default, in Dashboard Layout the document query selectors are processed based on the original DOM element. So, while executing those selectors within the Shadow element it returns null. So, we are facing these issues in rendering the Dashboard Layout within custom HTML element. 

 

 

 

Based on the above analysis, we need to ensure the component rendering within the custom HTML element. We need additional timeline to further validate and come up with a better solution to meet your requirement. We will validate and update you further details on 3^rd November 2021. 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Indhumathy Loganathan]

Hi Sahan, 

 

As explained earlier, we have developed all our controls with extensive DOM manipulation and CSS stylings. So in our current architecture, we are unable to provide support for Web Component. However, this requirement had already been considered as a feature at our end and this will be included in any of our upcoming releases. Generally, we will plan any feature implementation based on customer request count, feature rank and Wishlist plan.   

 

You can track the feature status through the below link, 

 

https://www.syncfusion.com/feedback/3788/new-framework-webcomponent-support 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L