BackGround

ActiveReports 8 provides a seamless solution for users regardless of the platform they are working with. It offers different types of viewers which are well equipped to display reports on different platforms. The WebViewer control has been very popular since the time it was included in ActiveReports. Two of the primary reasons being the ability to display reports over the web and the different types of viewers it comprises as a single control. In this blog article our focus revolves around the HTML Viewer type. Though it may have some limitations, it is ideal for scenarios where you do not expect the end users to install any third party plugins (like Flash or PDF). This is because the HTML viewer downloads only HTML and JavaScript to the client browser. _I would like to clarify that you should not confuse this HTML Viewer with the newly added HTML5 viewer._

What's Missing??

Often developers complain about some missing set of features in the HTML viewer, like a Print button or exporting functionality. I wrote a Blog Article sometime back on adding a Print button to the HTML viewer but I think it would be good to share some information about adding some more options to it to give a more mature look. So in this blog article, I will present some additional options which can be added to the HTML viewer.

1. Report Selection DropDown: This dropdown can be used to display a list of reports available for the user and the user may select any report to load it into the viewer. This comes handy when user wants to switch quickly between multiple reports.
2. Exporting Dropdown: This DropDown, as the name suggests, allow users to export the reports from the HTML viewer to different supported formats like PDF or Excel. This is very useful when a user wants to save the report and check it at a later point of time in offline mode.

Before we begin our implementation, let us get some idea about what exactly we have been talking about till now:

Implementing the Features

Since we now have an idea of what exactly we are trying to do, it makes sense to concentrate on the implementation. Let's divide this into two parts:

1. In this section we will see the code required for adding the Report Selection Dropdown. Let us see the code first. Client Side Code

   <script language="javascript" type="text/javascript">  
      function ForcePostBack() {  
         form1.submit();  
      }  
      var reportSelect = '<select id="ReportSelect" style="width:150px"><option selected disabled>Choose Report</option><option value="SectionReport1">SectionReport1</option><option value="SectionReport2">SectionReport2</option></select>';  
      $(document).ready(function () {  
         var selectedValue = $("#fldReportName").val();  
         if (selectedValue !== "") {  
            setTimeout(function () {  
               $("#ReportSelect").val(selectedValue);  
            }, 100);  
         }  
         var toolbar = $('#WebViewer1').find('.arvToolBar');  
         toolbar.append(reportSelect);  
         //Force a postback upon report selection  
         $("#ReportSelect").change(function (e, args) {  
            var reportName = this.value;  
            $("#fldReportName").val(reportName);  
            ForcePostBack();  
            this.value = $("#fldReportName").val();  
         });  
      });  
   </script>
   

   Server Side Code

   protected void Page_Load(object sender, EventArgs e)  
   {  
      if (Page.IsPostBack)  
      {  
         string reportName = this.fldReportName.Value.ToString();  
         switch (reportName)  
         {  
            case "SectionReport1":  
               SectionReport1 rpt1 = new SectionReport1();  
               WebViewer1.Report = rpt1;  
               break;  
            case "SectionReport2":  
               SectionReport2 rpt2 = new SectionReport2();  
               WebViewer1.Report = rpt2;  
               break;  
         }  
      }  
   }
   

   In this step we add a new select element to the WebViewer's ViewModel. This holds the names of the reports available to the user. Once the user selects a report, a postback is forced to fetch the report from the server and the server side code comes into play thereafter. Also a hidden field has been used to retain the selection in the dropdown after the postback has been performed.
2. The second part involves implementing the Export dropdown.This is purely client side code and is provided below:

<script language="javascript" type="text/javascript">  
   var exportSelect = '<select id="ExportSelect" style="width:80px"><option selected disabled>Export</option><option value="PDF" style="background: url(images/pdf.png) right no-repeat; width: 50px">PDF</option><option value="Excel" style="background: url(images/Excel.gif) right no-repeat; width: 50px">Excel</option></select>';  
   $(document).ready(function () {  
      var toolbar = $('#WebViewer1').find('.arvToolBar');  
      toolbar.append(exportSelect);  
      ar viewModel = GetViewModel("WebViewer1");  

      //Check the selected value in DropDown and Export  
      $("#ExportSelect").change(function (e, args) {  
         var valueSelected = this.value;  
         if (viewModel.PageLoaded()) {  
            switch (valueSelected) {  
               case "PDF":  
                  viewModel.Export(ExportType.Pdf, function (uri) {  
                     window.location = uri;  
                  }, true);  
                  break;  
               case "Excel":  
                 viewModel.Export(ExportType.Xls, function (uri) {  
                     window.location = uri;  
                  }, true);  
                  break;  
            }  
         }  
      });  
   });  
</script>

So in this part after adding the export drop down, we handle its "change" event to determine the currently chosen export type. Next we call the "Export" method of the HTML viewer to export the report in the desired format. In the sample attached to this post, you will notice that there are icons associated with the export type in the dropdown; however please note that they only work in FireFox due to other browser's limitation.

See it in Action!!

A sample application showcasing this implementation can be download from here. Check out the image below which gives a glimpse of its functionality.