How to access the method of

Question

Hi,We are using DashboardLayout, we use template in , we like to access methons defined in template, how can we access it? please help us.Below is what we try in our project.Main.vue

dtPctChart(){ return { template : CircleChartTemplate } }2. CircleChartTemplate.vuemethods: { test(){ } },when we try to access method "test" from Main.vue by using this.$refs.refdtPctChart.test();it doesn't work, this.$refres.refdtPct is undefined.Thanks,CZ

Indhumathy Loganathan · Answer

Hi CZ, 
 
Greetings from Syncfusion support. 
 
From the shared code snippet, we understood that you want to access the method inside a child component page in a parent component. You cannot set reference at the internal panel tag to get the child component page reference. You can get the reference within the child component tag only. Check the below code snippet. 
 




<CircleChartTemplate ref="refdtPctChart" /> 
... 
this.$refs.refdtPctChart.test(); 
 
Please try the provided suggestion at your end and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L

CZ · Answer

Hi Indhumathy,You don't answer the question, my question is How can I access the method inside a child component page in a parent component, for my example In want to access methods defined in

CircleChartTemplate.vue from its parament Main.vue, it should be in the method of Main.vue can call the method in

CircleChartTemplate.vue, can you give me an eample?Thanks,CZ

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi CZ, 

We understood that you are expecting to call a method inside the child template from the parent component 

To achieve your requirement, you can use the Event Bus concept. Refer the below link to know more about this approach. 

https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/  

Please refer to the following sample in which we have used event bus concept with Dashboard Layout component. 

https://codesandbox.io/s/vue-dashboard-chart-button-refresh-forked-8ipm8?file=/src/components/linetemplate.vue 

Please let us know if you need any further assistance. 

Regards, 
Shameer Ali Baig S.

CZ · Answer

Hi

Shameer Ali Baig S,Thank you for your information.I read the sample and It should work although I don't have time to  test in our project right now,I am working on putting more than 20 ejs-accumulationchart, ejs-chart, ejs-grid in ejs-dashboardlayout dynamically right now, there are a lot of challenge to finish the project on time, if I have question, I will consult you.Thank you for your support! Thanks,CZ

Keerthana Rajendran · Answer

Hi CZ, 

Most welcome. Please try the suggestion and get back to us if you need any further assistance. We will be happy to assist you. 

Regards, 
Keerthana R.

CZ · Answer

Hi Keerthana R,Thank you for your support.In our application, (1) We have multiple ejs-accumulationcharts, x position of one annotation "DT" should be show on the right corner, how to make its position is dynamically changed to right position when we resize this component?below is our project result. we can't get the box size during the create session, we have to use x: '85px', it should not be hard code, Below is our sample code, charname and valuepct are props, its value are "DT" and 0created(){ this.annotations = []; this.annotations.push({ content:'' + Number(this.valuepct).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:0}) + '', region: 'Series', coordinateUnits: 'Pixel', x: '50%', y: '50%' },{ content:' + "font-family:'Segoe UI'" + '>' + this.charname + '', region: 'Series', coordinateUnits: 'Pixel', x: '85px', y: '50%' } ); }(2) We don't know why location of some e-panels are not showed as we defined, how can we make it show exactly as we defined.Store Portfolio and Delivery should be on the first column of second row, but it shows in last rows, the templates to Delivery are ejs-accumulationchart, from these left of templates are ejs-chart, this maybe can have some help

<--- Above template pf contents are ejs-accumulationchart, bleow template of contents are ejs-chart -->

Please help usThanksCZ

Indhumathy Loganathan · Answer

Hi CZ, 
 
Please find the details for your queries. 
 
Query 1: We have multiple ejs-accumulationchart, x position of one annotation "DT" should be show on the right corner, how to make its position is dynamically changed to right position when we resize this component? 
 
We suggest you to specify the second annotation x value in percentage which changes annotation position dynamically even while resizing the page. Please check with below snippet.  





{  
content:'+ "font-family:'Segoe UI'" + '>' + this.charname + '',  
region: 'Series',  
coordinateUnits: 'Pixel',  
x: '60%', y: '50%'  
}  

UG : https://ej2.syncfusion.com/vue/documentation/accumulation-chart/annotation/#co-ordinate-units 
 
Query 2: We don't know why location of some e-panels are not showed as we defined, how can we make it show exactly as we defined. 
 
You can render the panel at proper position by specifying the exact panel position using row, col, sizeX and sizeY properties. For your reference, we have prepared a simple sample to render panels to meet your exact positioning. Check the below sample. 
 
https://codesandbox.io/s/vue-dashboard-1ekic?file=/src/components/Dashboard.vue 

Please get back to us if you need any further assistance. 

Regards, 
Indhumathy L

CZ · Answer

HI ​

Indhumathy L,Thank you for your support.For Query 1: x value in percentage is not suitable for this case, because  (1) first annotation  10 is in percent, it is  x: '50%', y: '50%', it just show in the center of the circle. (2) if we change the second annotation DT to x:'60%', below screen shot is the test result. Since the panel is resizable, 10 and DT can be overlapped when we change the size of the panel, so we want to set up its dynamically value, but we don't know how to get panel size in create() of  the vue component's life cycle. Please help us.Thanks,CZ

Keerthana Rajendran · Answer

Hi CZ, 
 
Query 1: x value in percentage not suitable for this case. 
As per your attached image, it seems to be both annotations are in center position. For this, you can use single annotation with multiple texts, which will be center aligned automatically while specifying x and y value as 50%. We also request you to change annotation text font size while resizing the panel size.  
 
Query 2: we don't know how to get panel size. 
 
You can get the panel details through the serialize method of Dashboard Layout component.  
 
UG link: https://ej2.syncfusion.com/vue/documentation/dashboard-layout/state-maintenance/ 
 
API link: https://ej2.syncfusion.com/vue/documentation/api/dashboard-layout/#serialize 
 
Kindly revert if any concerns. 
 
Regards, 
Keerthana R.

How to access the method of <e-panel from DashboardLayout?