1. Home
  2. Forum
  3. Vue
  4. How to access the method of <e-panel from DashboardLayout?

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

Hi,

We are using DashboardLayout, we use template in <e-panl>, we like to access methons defined in template, how can we access it? please help us.

Below is what we try in our project.

  1. Main.vue 

<ejs-dashboardlayout ref="dashbordInstance"

          :cellSpacing="spacing" :columns="24" allowResizing="true" :key="chartkey"

          :resizeStop="onPanelResize" >

            <e-panels>

                <e-panel ref="refdtPctChart" :key="chartkey" :row="0" :col="0" :sizeX="4" :sizeY="1" :content="dtPctChart"></e-panel>

                <e-panel :key="chartkey" :row="0" :col="4" :sizeX="4" :sizeY="1" content="<div>1</div>"></e-panel>

                <e-panel :key="chartkey" :row="0" :col="8" :sizeX="4" :sizeY="1" content="<div>2</div>"></e-panel>


 dtPctChart(){

      return {

        template : CircleChartTemplate

      }

 }

2.  CircleChartTemplate.vue

methods: {

    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


9 Replies
IL Indhumathy Loganathan Syncfusion Team January 31, 2022 03:55 PM UTC

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 CZ February 1, 2022 03:10 PM UTC

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


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 2, 2022 11:32 AM UTC

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. 


Please refer to the following sample in which we have used event bus concept with Dashboard Layout component. 


Please let us know if you need any further assistance. 

Regards, 
Shameer Ali Baig S. 


CZ CZ February 2, 2022 12:15 PM UTC

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


KR Keerthana Rajendran Syncfusion Team February 3, 2022 05:25 AM UTC

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 CZ February 3, 2022 08:51 PM UTC

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 0

created(){

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




<ejs-dashboardlayout id="defaultLayout" ref="dashbordInstance" v-if="isfirstload == false"

          :cellSpacing="spacing" :columns="24" allowResizing="true" :key="chartkey"

          :resizeStop="onPanelResize" >

            <e-panels>

                <e-panel :row="0" :col="0" :sizeX="4" :sizeY="1" :content="dtPctChart"></e-panel>

                <e-panel :row="0" :col="4" :sizeX="4" :sizeY="1" :content="fcPctChart"></e-panel>

                <e-panel :row="0" :col="8" :sizeX="4" :sizeY="1" :content="deliveryPctChart"></e-panel>

                <e-panel :row="0" :col="12" :sizeX="4" :sizeY="1" :content="mccafePctChart"></e-panel>

                <e-panel :row="0" :col="16" :sizeX="4" :sizeY="1" :content="eotfPctChart"></e-panel>

                <e-panel :row="0" :col="20" :sizeX="4" :sizeY="1" :content="partyroomPctChart"></e-panel>


                <e-panel :row="1" :col="0" :sizeX="4" :sizeY="3" :content="storeportfolioChart"></e-panel>

                <e-panel :row="1" :col="4" :sizeX="4" :sizeY="3" :content="storedeliveryChart"></e-panel>


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


                 <e-panel :row="1" :col="8" :sizeX="8" :sizeY="3" :content="avpChart"></e-panel>

                <e-panel :row="1" :col="16" :sizeX="8" :sizeY="3" :content="evaChart"></e-panel>


                <e-panel :row="2" :col="0" :sizeX="8" :sizeY="3" :content="devcostevaChart"></e-panel>

                <e-panel :row="2" :col="8" :sizeX="8" :sizeY="3" :content="soievaChart"></e-panel>

                <e-panel :row="2" :col="16" :sizeX="8" :sizeY="3" :content="cashflowChart"></e-panel>


                <e-panel :row="3" :col="0" :sizeX="8" :sizeY="3" :content="occupcostevaChart"></e-panel>

                <e-panel :row="3" :col="8" :sizeX="8" :sizeY="3" :content="reroievaChart"></e-panel>

                <e-panel :row="3" :col="16" :sizeX="8" :sizeY="3" :content="devcycleevaChart"></e-panel>


                <e-panel :row="4" :col="0" :sizeX="8" :sizeY="3" :content="agingauvGrid"></e-panel>






Please help us


Thanks

CZ


IL Indhumathy Loganathan Syncfusion Team February 4, 2022 03:03 PM UTC

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%'  
}  

 
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. 
 

Please get back to us if you need any further assistance. 

Regards, 
Indhumathy L 


CZ CZ February 5, 2022 12:15 AM UTC

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


KR Keerthana Rajendran Syncfusion Team February 7, 2022 02:16 PM UTC

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.  
 
 
 
Kindly revert if any concerns. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon