How to click nested toolbar menu item from another component

posted on May 11th, 2021

Closed

Toumku asked on May 11, 2021

I'm using react. I understanding flexmonster have toolbar methods and events. And its works perfect. But i need to click nested toolbar menu item from "another component"(A). it means A component is cant control or access flexmonster. So when i inspect nested menu item it havent any click event or attribute. i dont know how flexmonster can click this menu item.

How to click?

Attachments:
menuitem.PNG
menuitem-console.PNG

4 answers

Public

Milena Pechura ⋅ Flexmonster ⋅ May 11, 2021

Hello!

Thank you for posting to our forum.

For the cases when there is no access to Flexmonster, we added a new feature in the 2.8.31 version. Now Flexmonster API is also available from container’s uielement. This means that you can call the component’s methods like so:

document.querySelector('#pivot-container').uielement.flexmonster.showCharts("pie");

Therefore, if you use the older version, please update the Flexmonster component. Here is our tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.

Our team would like to also provide some explanations about the sample code above. We used the showCharts API call, in which you can pass the desired chart type as a parameter. Further details about this method can be found here: https://www.flexmonster.com/api/showcharts/.

Please let us know if our answer helped.

Kind regards,
Milena

Public

Toumku ⋅ May 12, 2021

Hello Milena,
Im using react-flexmonster v2.8.31.

<Flexmonster.Pivot
 container='pivotContainerName'
/>

im confused. container prop not working in my case.
i tried

const p = document.getElementById('pivotContainerName');
// or
const p = document.querySelector('#pivotContainerName');
// returns null

i understanding of course returns null because there is no id (container-console.png);

how do i fix it?

Attachments:
container.PNG
container-console.PNG

Public

Milena Pechura ⋅ Flexmonster ⋅ May 13, 2021

Hi,

Thank you for providing code samples and screenshots.
It helped us to understand the situation better.

Our team has found a solution for this issue in React. Please follow the steps below.

Assign an id to the parent element of the Flexmonster container. In your case, to the div with the "Flexmonster" class.
Then, get the component's container using children property:
```
document.querySelector('#myid').children[0]
```
From this child element, uielement.flexmonster should be available.

Please let us know if it worked for you.
Looking forward to your response.

Best regards,
Milena

Public

Toumku ⋅ May 13, 2021

Haha. nice hack. Thank you very much.

This question is now closed