Menu
Download Free Trial

Angular JS with flexmonster

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

8 answers

Public
rajesh kvn 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

Public
Ian Sadovy Flexmonster 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

Public
rajesh kvn 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

Public
Ian Sadovy Flexmonster January 6, 2016

Hi Rajesh,
 
Sure, you can use the following check:

if (flexmonster.instances == 0) {
// no instances of flexmonster
}

Regards,
Ian

Public
rajesh kvn January 6, 2016

Hi Ian,
Great..! Thanks for confirmition and prompt response.
Thanks,
Rajesh
 

Public
rajesh kvn 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

Public
Ian Sadovy Flexmonster 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

Public
Tanya Gryshko Flexmonster 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 tutorials for Angular: Integration with AngularJS and Integration with Angular 2. Read more about integration with other frameworks and technologies: http://www.flexmonster.com/doc/integration/.  
Regards,
Tanya

Please login or Register to Submit Answer