asked on January 4, 2016
Hi,
we are working on angular project, where I am trying to integrate flexmonster component in our app. I was able to integrate grid perfectly, but when we access the functions of flexmonster it is throwing an error. here is example below:
TypeError: Cannot read property 'setReport' of undefined
steps I followed:
1. Referenced flexmonster.js in index.html: <script src="./controls/flexmonster/flexmonster.js"></script>
2. integrated component in .html.(working fine till now)
3. When I tried to access methods of flexmonster throw above error.
Attached both files to this thread, please help me on this issue.
Is anything differently we should access the instance?
Thanks,
Rajesh
⋅ January 4, 2016
not able to attach html file. given below in html:
<div>
<h1>Pivot</h1>
<br/>
<div id="grid"></div>
<script>
var pgrid = flexmonster.embedPivotComponent("./controls/flexmonster/", "grid", "100%", "770", {
licenseKey: "Z50F-1E1I2F-0311-1F31-2S33-1A1H-2900-1J"
}, true);
</script>
</div>
Thanks,
Rajesh
⋅ January 4, 2016
Hello Rajesh,
Thanks for the request.
Please use "jsPivotCreationCompleteHandler" to determine that the component is ready to use.
Working sample is here - https://s3.amazonaws.com/flexmonster/downloads/FLEXMONSTER-ANGULAR-JS-SAMPLE.zip
Please let me know if it works for you.
Regards,
Ian
⋅ January 6, 2016
Hi Ian,
Thanks for the response.
Looks fine and needs a clarification on multiple times embedpivotcomponent calls(when this call is in constructor, there is a chance to hit everytime page request) .
// Init Flexmonster
flexmonster.embedPivotComponent("./lib/flexmonster/", "pivot-container", "100%", "500", {
licenseKey: "Z544-5U1SI3-3D1H-2J22-0U37-4L2A-0M41-3F",
jsPivotCreationCompleteHandler: setPivotReport
});
Can we have any check to determine already there is flexmonster instance? I see flexmonster.Instance in the .js so, can it be useful?
Thanks,
Rajesh
⋅ January 6, 2016
Hi Rajesh,
Sure, you can use the following check:
if (flexmonster.instances == 0) {
// no instances of flexmonster
}
Regards,
Ian
⋅ January 6, 2016
Hi Ian,
Great..! Thanks for confirmition and prompt response.
Thanks,
Rajesh
⋅ January 7, 2016
Hi Ian,
when we initialize flexmonster.embedPivotComponent in controller, we are facing some issues. I have a menu item, for every click which calls controller constructor.so, every time it is trying to initialize/create flexmonster instance so, because of no.of instances creation the data is not binding to it.
it properly binds the data on first call or full browser refresh(because we have only one instance at this time).I tried below approach as well, it did not work for me.
if (flexmonster.instances === 0) {
flexmonster.embedPivotComponent(“./lib/flexmonster/”, “pivot-container”, “100%”, “500”, {
licenseKey: “Z544-5U1SI3-3D1H-2J22-0U37-4L2A-0M41-3F”,
jsPivotCreationCompleteHandler: setPivotReport
});
} in this case, first time only the flexmonster control is displaying. from second time onwards it was not showing the control.
Is there any way to declare this in html and access it in controller and bind the data? or
Can we destroy the instance and recreate for every click(for every controller constructor call)?
I think, which will be reproducible from your end also. Can you please help me on this issue?
Thanks,
Rajesh
⋅ January 8, 2016
Hi Rajesh,
I understood your problem.
It seems that you should also store all HTML that was bound to flexmonster instance.
Please try the following approach:
if (window.flexmonsterView == null) {
flexmonster.embedPivotComponent(...);
window.flexmonsterView = document.getElementById("pivot-container"); // store HTML
} else {
$("pivot-container").append($(window.flexmonsterView)); // restore HTML
//setPivotReport();
}
Does it work for you?
Regards,
Ian
⋅ December 5, 2016
Hello Rajesh and all Flexmonster users,
In version 2.3 Pivot table component easily integrates with popular frameworks. Please find more details in our tutorial for Angular: Integration with Angular. Read more about integration with other frameworks and technologies: https://www.flexmonster.com/doc/available-tutorials-integration/.
Regards,
Tanya