asked on January 21, 2021
Hi;
We just downloaded the flexmonster and implemented it in our project in jquery way. We use jquery 3.1.1 and it is an angular project 2.0.0-rc.4.
The data is loading and flexmonster is showing data as expected. The problem is that, when we click the Fields button, popup windows is opened, but the window is not clickable. It is like disabled for some reason. Draganddrop is not working, Cancel, Apply... buttons, none of them is working. There is no any message in the Chrom's console.
It is like a disabled layer. Please see the attached image. We can not drag fields, can not click the buttons. It is not functioning completely.
When we test flexmonster as a standalone index.html in the same browser, there is no problem.
What may cause this?
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<!--inspinia-->
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
<link href="css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
<link href="css/plugins/select2/select2.min.css" rel="stylesheet">
<link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
<link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
<link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="css/plugins/switchery/switchery.css" rel="stylesheet">
<link href="js/plugins/flexmonster/flexmonster.min.css" rel="stylesheet" />
<!--angular-->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!--Wijmo-->
<script src="js/plugins/wijmo/wijmo.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.grid.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.grid.detail.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.grid.filter.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.input.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.angular2.min.js" type="text/javascript"></script>
<script src="js/plugins/pdf/pdfkit.standalone.js"></script>
<script src="js/plugins/pdf/blob-stream.js"></script>
<!--Wijmo excel libraries-->
<script src="js/plugins/wijmo/wijmo.xlsx.min.js" type="text/javascript"></script>
<script src="js/plugins/wijmo/wijmo.grid.xlsx.min.js" type="text/javascript"></script>
<!-- JSZip library -->
<script src="js/plugins/jszip/jszip.min.js" type="text/javascript"></script>
<link href="css/plugins/wijmo/wijmo.css" rel="stylesheet">
<!--to fix toastr isue-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script src="systemjs.config.js"></script>
<!-- switchery -->
<script src="js/plugins/switchery/switchery.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<style>
tbody tr.odd.selected, tbody tr.even.selected {
background-color: #acbad4;
}
</style>
</head>
<body class="md-skin">
<script src="js/plugins/flexmonster/toolbar/flexmonster.toolbar.js"></script>
<script src="js/plugins/flexmonster/flexmonster.js"></script>
<script src="js/plugins/flexmonster/lib/canvg.min.js"></script>
<script src="js/plugins/flexmonster/lib/d3.v3.min.js"></script>
<script src="js/plugins/flexmonster/lib/flexmonster.amcharts.js"></script>
<script src="js/plugins/flexmonster/lib/flexmonster.fusioncharts.js"></script>
<script src="js/plugins/flexmonster/lib/flexmonster.googlecharts.js"></script>
<script src="js/plugins/flexmonster/lib/flexmonster.highcharts.js"></script>
<script src="js/plugins/flexmonster/lib/html2canvas.min.js"></script>
<script src="js/plugins/flexmonster/lib/jspdf.min.js"></script>
<script src="js/plugins/flexmonster/lib/promise.min.js"></script>
<script src="js/plugins/flexmonster/lib/sha1.min.js"></script>
<app-boot></app-boot>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<script src="js/plugins/ladda/spin.min.js"></script>
<script src="js/plugins/ladda/ladda.min.js"></script>
<script src="js/plugins/ladda/ladda.jquery.min.js"></script>
<script src="js/plugins/select2/select2.full.min.js"></script>
<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="js/plugins/datapicker/bootstrap-datepicker.tr.js"></script>
<script src="js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="js/plugins/morris/morris.js"></script>
<script src="js/plugins/chartjs/chart.min.js"></script>
<script src="js/plugins/jstree/jstree.min.js"></script>
<script src="js/plugins/momentjs/moment-with-locales.min.js"></script>
</body>
⋅ January 21, 2021
we initialize it like this
typescript
var pivot = $("#pivot-container").flexmonster({
licenseKey: "Z7TX-XD7J5M-6T5M1M-4K1Z35",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: "https://cdn.flexmonster.com/reports/report.json"
});
Report.Html
<div id="pivot-container"></div>
⋅ January 22, 2021
Hi Suphi,
Thank you for posting your question.
To start with, we would suggest initializing the component with the new Flexmonster() API call instead of using jQuery. This is the way to initialize Flexmonster recommended in our Quick start guide.
In case this does not help, do you think you could send us your project (e.g., as a .zip archive) so that we can look through it first hand and investigate the issue further?
Looking forward to your reply.
Best regards,
Mykhailo
⋅ February 1, 2021
Hi Suphi,
How are you?
Just checking in to ask if you've received our previous response. Is your initial question still relevant?
Please let us know your thoughts.
Best regards,
Mykhailo
⋅ February 8, 2021
Hi Suphi,
Hope you're doing well.
We were wondering if you've had a chance to look through our previous response. Is there still anything we could help you with?
We would be happy to hear your feedback.
Best regards,
Mykhailo