I have an MVC C# web site where I am getting my .igr to properly display in an HTML5 report viewer. I am testing in both IE10 and the latest Chrome.
Unfortunately, none of the buttons are working (i.e. Prev, Next, Export, Zoom). The slider does seem to work though.
I am using the infragistics.loader.js but I am not seeing how the infragistics.reporting.js is implemented. I have tried putting it in 'Scripts' and explicitly referencing it in the same way I include infragistics.reporting.js but nothing I do seems to get the buttons working.
I suspect I am missing something simple but I am at an impasse.
Thank you for any tips!
Hi Richard,
Can you show how are you invoking the loader and where do you have the scripts and modules?
Regards,Héctor
Thank you for asking, Héctor.
I have 'infragistics.loader.js' in a Scripts folder along with all the jQuery, jQuery-UI, and modernizr. Inside scripts is a 'modules' folder where all the 'infragistics.chart*.js' is. I currently have 'infragistics.reporting.js' in here also but I've moved it up a folder also to no avail.
Here is the html from the rendered page...
<!DOCTYPE html><html lang = "en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" /> <link href="/Styles/bootstrap.min.css" rel="stylesheet" /> <link href="/Styles/bootstrap-responsive.min.css" rel="stylesheet" /> <link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script> <script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script> <script src="/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head><body> <div id="" class="row-fluid">
<script src="/Scripts/infragistics.loader.js" type="text/javascript"></script>
<script type="text/javascript"> $.ig.loader({ cssPath: '/Styles/', scriptPath: '/Scripts/', resources: 'igReportViewer', ready: function () { //Page and resources are already loaded $("#viewer").igReportViewer({ renderSettings: { definitionUri: '/Content/reports/Report1.igr', serviceEndpointUri: '/ReportService.svc/ajaxAddress/' }, width: 1280, height: 720 }); } });</script>
<h2>Report</h2><div id='viewer'></div> </div> <div id="footer" class="row-fluid"> </div> </div>
</body></html>
You need to reference the base jQuery UI styleheet, which seems to be missing from that code.
The CSS and top script section of my HTML now looks like this but the buttons on the Report Viewer still aren't working. Is there any hint in that the slider IS working?
<link href="/Styles/bootstrap.min.css" rel="stylesheet" /> <link href="/Styles/bootstrap-responsive.min.css" rel="stylesheet" /> <link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
Thanks for helping out on this Elena.
I believe the problem was ultimately in the combination of scripts that I was using. I do not have the luxury of taking much time to determine exactly where it went wrong, but at least I do have it working for me now. One thing I find interesting is what is "missing" here... I have no reference to any jquery-ui css.
I did finally get it working with the following implementation:
<link href="/Styles/bootstrap.min.css" rel="stylesheet"/> <link href="/Styles/bootstrap-responsive.min.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/Scripts/infragistics.loader.js"></script>
Hello Richard,
I have been looking into your code snippets and they look ok, still I could suggest you try the steps mentioned in our documentation:
http://help.infragistics.com/NetAdvantage/reporting/2012.2/CLR4.0?page=Getting Started with the HTML5 Report Viewer.html
these steps could guide you how to reference all of the required scripts in your application.
Also you could try to change only the versions of the jQuery to 1.7.2 and jQueryUI to 1.8.21 or lower.
Please let me know if this helps.
I am also still curious if infragistics.reporting.js has anything to do with this. I'm no javascript expert but it seems like the handlers for these button events are in there.