Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Fields popup windows is not clickable

Answered
Suphi Atlı 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=”96×96″ href=”/img/favicon-96×96.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>

Attachments:
Fields_popup.png

4 answers

Public
Suphi Atlı 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>

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 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

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 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

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 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

Please login or Register to Submit Answer