Customize Click Event For Custom Button in Flash Viewer

February 06 2013

Flash Viewer, as its name suggests is a Flash Based Report Viewer and users need to have Acrobat Flash Player installed on their browsers to view reports when using this viewer. Flash Viewer is not just limited to displaying reports; it extends its capabilities by allowing developers to customize the viewer as well. Developers can show, hide, reorder buttons, remove buttons, add custom buttons, or create a custom toolbar. I am not going to go deep into the concept of customizing the toolbar but discuss how developers can handle the Click Event of a custom button added to the Flash Viewer.This is how our FlashViewer will look like after completing this implementation:

Before you begin to handle the click event of a custom Button placed in the FlashViewer, you will need to make sure that you have added the button on the Flash Viewer Toolbar. The code to achieve this will look something similar to the one given below Adding a Custom button to FlashViewer ToolBar

ToolButton customButton;  
customButton = Tool.CreateButton("PdfButton");  
customButton.Caption = "PDF";  
customButton.ToolTip = "Click here to Export to PDF";  
customButton.ClickNavigateTo = "Viewer.aspx?Export=pdf";  
WebViewer.FlashViewerToolBar.Tools.Insert(0,customButton);

After we are done with adding the custom button to the Flash Viewer Toolbar, we can proceed to handling the Click Event for this button. ActiveReports provides two ways through which can handle this. The first one involves Client Side Scripting and the other one involves Server Side Scripting. You can use any one of the approaches depending upon your requirement. Handling the Click event of a custom button on the Client Side Handling the Click Event for the custom button on the client would require us to make use of the Tool Click event of the Flash Viewer. This event gets raised when a toolbar button is clicked. The Tool Click event handler receives an argument of type ToolClickEventArgs, containing data related to this event. The handler argument has a property Tool through which the control information can be obtained. The code provided below declares a variable, attaches the Flash Viewer and sets the event handler. The code should be placed just before the start of the Body Tag of the .aspx source page.

&lt;script language="javascript" type="text/javascript"&gt;  
var viewer;  
function init() {  
GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function () {  
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");  
viewer.setEventsHandler({  
OnToolClick: function (e) {  
if (e.Tool == "CustomButton")  
{ alert("The Button You Clicked was : " + e.Tool); return false }  
}  
});  
});  
}  
&lt;/script&gt;  
&lt;body onload="return init()"&gt;

Additionally the UseClientAPI property of the FlashViewer should be set to True so that the Client Side scripting that we have used above can be called. The UseClientAPI property is set to False by default. Handling the Click event of a custom button on the Server Side Handling the Click Event on the Server Side is going to involve the usage of ClickNavigateTo property of the Custom button that we created earlier. This property specifies a URL that the button opens in a new browser window. So in the Page_Load event of the specified URL we can perform a server side action for example exporting the report to PDF. The ClickNavigateTo property can also be used to navigate to the same aspx page which hosts the FlashViewer, this will involve passing a query string to the URL and then checking the query string on the page load to perform a desired action.The code snippet that achieves this is provided below.

protected void Page_Load(object sender, EventArgs e)  
{  
if (Request.QueryString["Export"] == "PDF")  //This checks the query string passed and performs exporting on the Server Side  
{  
ExportToPDF();  
}  

GrapeCity.ActiveReports.SectionReport _rpt = new GrapeCity.ActiveReports.SectionReport();  
_rpt.Document.Load(Server.MapPath("Employee Sales.rdf"));  
WebViewer1.FlashViewerToolBar.Tools.Insert(21, AddCustomButton("CustomButton", "SampleButton", "CustomButton", ""));  
WebViewer1.FlashViewerToolBar.Tools.Insert(22, AddCustomButton("PDFEXPORT", "Export To PDF", "PDF EXPORT", "WebForm1.aspx?Export=PDF")); //Passed a query string  
WebViewer1.Report = _rpt;  
}

For demonstration purpose, a sample application in both C# and VB.NET can be downloaded from the links provided below. FlashViewer_Toolbar_CS FlashViewer_Toolbar_VB

MESCIUS inc.