ActiveReports 9
Customizing the Flash Viewer UI
Show AllShow All
Hide AllHide All

You can customize the Flash Viewer UI, using javascript functions. This walkthrough illustrates how to customize the look and feel of the Flash Viewer.

The walkthrough is split up into the following activities:

To follow the steps of this walkthrough, you must first complete the steps on creating an ASP.NET Web site and setting up the FlashViewer, described in the Flash Viewer walkthrough.

To customize the Flash Viewer options

  1. Select the WebViewer on your .aspx page, and in the Properties window, expand the FlashViewerOptions node.
  2. Set the property UseClientApi (FlashViewerOptions) to True (this property is set to False by default).
  3. Declare a variable and attach the FlashViewer by adding the following code onto the .aspx source view.

    Paste the code into .aspx source
    Copy Code
    <script language="javascript" type="text/javascript">
    var viewer;
    
    function init() { GrapeCity.ActiveReports.Viewer.OnLoad ("WebViewer1", function() {
      viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1"); });
    }
    </script>
    
    ...
    
    <body onload="return init()">
    
  4. Drag the Html Input (button) control from the Visual Studio toolbox onto the .aspx design view, containing the WebViewer control.

  5. Double-click the Button control and paste the following code:

    Paste the code into .aspx source
    Copy Code
    <input id="button1" type="button" value="button" onclick="return Button1_onclick()" />
    
  6. Add the following function for this button:

    Paste the code into .aspx source
    Copy Code
    function Button1_onclick() { 
            var zoom = viewer.getZoom(); 
                    alert("Check that zoom property is changed from " + zoom); 
                    zoom += 0.1; 
                    viewer.setZoom(zoom);
                    alert("to " + zoom);
    }
    
    Note: You can declare a variable and attach the FlashViewer in the event handler directly.
    Paste the code into .aspx source
    Copy Code
    function Button1_onclick()
    {
    var viewer;
    viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
    ...
    }
    

Available Flash Viewer properties

Available Flash Viewer methods

To handle Flash Viewer Events

  1. Declare a variable, attach the Flash Viewer and add event handlers by adding the following code onto the .aspx source view.
Paste the code into .aspx source
Copy Code
<script language="javascript" type="text/javascript">
var viewer;
function init() {
GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function() {
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
    viewer.setEventsHandler({
       <EVENTS>
    });
});
}
</script>
...

<body onload="return init()">
Note: <EVENTS> are described in detail in the Available events list below.

Available events

Note: Use the "return true;" value to show that the client side has handled the event. The "return false;" value indicates that the event was not handled.

 

 


Copyright © 2014 GrapeCity, inc. All rights reserved

Support Forum