How to binding dynamically values to template in e-pane?

[CZ]

Hi,

We are using Dashboard right now, the sample 

https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/seodashboard.html

but we need pass parameter and values to the component inside e-panel, 

for example "Active Visitors" e-panel in your demo, we need to pass the values to  activeVisitorTemplate to render, can you tell us how to pass the values to it and how to make it refresh after new values are passed.

import activeVisitorTemplate from "./activeVisitors.vue";  <e-panel :sizeX="2" :sizeY="2" :row="1" :col="0" header="<div>Active Visitors</div> " :content="visitor"></e-panel>  

visitor: function() { return { template : activeVisitorTemplate } },

Thanks,

CZ

[Shameer Ali Baig Sulaiman Ali Baig]

Hi CZ, 

Greetings from Syncfusion support. 

We have checked your requirement to update the component appended within a panel dynamically in Vue. You can achieve this by taking reference to the component inside panel and can update its properties, dynamically. 

Refer to the following sample in which the properties of the component placed inside Dashboard panel is updated dynamically. 

https://codesandbox.io/s/vue-template-forked-igj9j 

 

Refer the following links to know more about Vue Dashboard Layout component. 

Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/dashboard-layout/seodashboard.html 

Documentation: https://ej2.syncfusion.com/vue/documentation/dashboard-layout/template/#vue-component 

Please let us know if you need any further assistance. 

Regards, 

Shameer Ali Baig S. 

[CZ]

Hi Shameer,

Thank you for your information.

what we want to do is to pass parameters to "<e-panel " from parent container, use your demo as an example,

In the container GUI, there are several parameters which will can dynamically choose, such as start year, last year, ..., we need to pass these parameters to vistor, map, line, spline, usage dynamically, vistor, map, line, spline, usage will render its content based on these these parameters.

Can you give us a example how to pass parameters to the template in "<e-panel" from <ejs-dashboardlayout  ?

<ejs-dashboardlayout id='analysisLayout' :columns="6" ref="analysisLayout" :cellSpacing='cellSpacing' :cellAspectRaito='aspectRatio'> <e-panels> <e-panel :sizeX="2" :sizeY="1" :row="0" :col="0" :content="card1"></e-panel> <e-panel :sizeX="2" :sizeY="1" :row="0" :col="2" :content="card2"></e-panel> <e-panel :sizeX="2" :sizeY="1" :row="0" :col="4" :content="card3"></e-panel> <e-panel :sizeX="2" :sizeY="2" :row="1" :col="0" header="<div>Active Visitors</div> " :content="visitor"></e-panel> <e-panel :sizeX="2" :sizeY="2" :row="1" :col="2" header="<div>Regional Map</div>" :content="map" ></e-panel> <e-panel :sizeX="2" :sizeY="2" :row="1" :col="4" header="<div>Visitors by Type</div>" :content="line"></e-panel> <e-panel :sizeX="4" :sizeY="2" :row="3" :col="2" header="<div>Traffic History</div>" :content="spline" ></e-panel> <e-panel :sizeX="2" :sizeY="2" :row="3" :col="0" header="<div>Useage Statistics</div>" :content="usage"></e-panel> </e-panels> </ejs-dashboardlayout>

Thanks,

CZ

[Kanagambigai Murugan]

Hi CZ, 

We are currently validating the feasibility of achieving your requirement to pass parameters from container to render content within Dashboard Layout component. We will check and update you with further details within four business days on 31^st January. 

We appreciate your patience. 

Regards, 

Kanagambigai M 

[Indhumathy Loganathan]

Hi CZ, 

 

The Dashboard Layout component is a simple layout component, and you can render any element as panel content. We understand that you want to update the panel content based on parameters with template support. For your reference, we have prepared a simple sample where we updated the entire panel with a button click using the Dashboard Layout panels property. Check out the sample at the link below. 

 

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

 

If you just want to update the panel content, then you can bind a div container as content and append the required content within that div using its id value. Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L