Show All

Hide 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:

Adding code to customize the Flash Viewer options
Adding code to handle the Flash Viewer events

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

Select the WebViewer on your .aspx page, and in the Properties window, expand the FlashViewerOptions node.
Set the property UseClientApi (FlashViewerOptions) to True (this property is set to False by default).

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()">

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()">

Drag the Html Input (button) control from the Visual Studio toolbox onto the .aspx design view, containing the WebViewer control.

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()" />

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"); ... }

The properties below use a pair of the getter and setter functions, which names are formed as {get|set}<PropertyName>().

Property Name	Description
CurrentPage	Integer. Gets or sets the page for a currently selected view.
HyperLinkBackColor	String. Gets or sets the background color for all hyperlinks in a document. This value is applied only after a new document is loaded. The format is "#FF0000" (#RRGGBB).
HyperLinkForeColor	String. Gets or sets the color for all hyperlinks in a document. This value is applied only after a new document is loaded. The format is "#FF0000" (#RRGGBB).
HyperLinkUnderline	Boolean. Gets or sets a value determining whether the text of all hyperlinks in a document is underlined. This value is applied only after a new document is loaded.
SearchResultsBackColor	String. Gets or sets the background color of the highlighted text when using the Find dialog. The format is "#FF0000" (#RRGGBB).
SearchResultsForeColor	String. Gets or sets the color of the highlighted text when using the Find dialog. The format is "#FF0000" (#RRGGBB).
PaperColor	String. Gets or sets the paper color of the report. The format is "#FF0000" (#RRGGBB).
ShowSplitter	Boolean. Gets or sets a value determining whether to display a splitter. If set to True, the splitter is shown.
TargetView	String. Gets or sets a value that specifies which view - Primary or Secondary, is currently active. If the ShowSplitter property is set to False, then you cannot switch to the Secondary view.
ThemeUrl	String. Gets or sets a value specifying the relative URL of a skin to use on the Flash Viewer.
Zoom	Integer. Gets or sets a value that specifies the zoom level at which to display the report.
TocPanel	Object. Gets the Table of Contents Panel object. This property is read-only. Alignment To align the TOC panel. ShowThumbnails To specify whether to display a pane with thumbnail views of pages. ShowToc To specify whether to display the table of contents pane. Visible To specify whether to display the Table of contents. Width To specify the Table of contents width.
ViewType	String. Gets or sets the current ViewType value.
EventsHandler	Object. Gets or sets the events handler container.

Note: Except for the below mentioned methods, {get|set}<Property Name>() method can be used for all the properties. See Flash Viewer topic for details.

Method Name

Description

LoadDocument(string documentUrl)

Loads the RDF document. You may use an RDF file that resides on a server, RpxHandler, CompiledReportHandler or custom Http handler implementation to provide a streamed document. This method cancels the current document's loading.

Paste the code into .aspx source	Copy Code
function btnLoadDoc_onclick() { viewer.LoadDocument("RpxHandler/NwindLabels.rpx?&OutputFormat=Rdf3"); }

CancelDocumentLoad()

Cancels the loading of a current document.

Print(PrintOptions options)

Causes the Viewer to wait until all required pages are loaded, displayed in the Print dialog and starts printing. The PrintOptions are similar to the WebViewer.PrintOptions, except that the PageRangesCollection methods are merged into the PrintOptions class.

CreatePrintOptions()

Creates options for the Print() method.

setViewType(string viewType, int multiPageRows, int multiPageCols)

Specifies the view mode.

Possible values for the first parameter are specified in the ViewType enumeration. The last two parameters are applied for ViewType.MultiPage only.

To handle Flash Viewer Events

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()">

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.

Event

Description

OnLinkClick(LinkEventArgs)

Specifies the URL value of a linked item or a string. This event is raised when a report object with a hyperlink is clicked; this event overrides the default Hyperlinks behavior that simply opens another browser window. Cancelable.

The event handler receives an argument of type LinkEventArgs containing data related to this event. The handler argument has the field "Link". The field "Link" returns the hyperlink URL value.

	Copy Code
OnLinkClick: function(e) { alert(e.Link);//specifies url of the link item, string return true; }

OnError(ErrorEventArgs)

Fires when an application fires an error or a warning. Use this event to customize FlashViewer error messages and warnings.

The event handler receives an argument of type ErrorEventArgs containing data related to this event. The handler argument has the following fields - "ErrorType" and "Message".

The field "ErrorType" contains the error type value; the field "Message" contains a description of a Flash Viewer problem.

This event allows suppressing any notifications to a user.

	Copy Code
OnError: function(e) { alert(e.Message); //error message, string alert(e.ErrorType); //possible types are "Error" and "Warning", string return false; }

OnLoadProgress(LoadProgressArgs)

Raised during the processing of a report.

The event handler receives an argument of type LoadProgressArgs containing data related to this event. The handler argument has the following fields - "PageCount", "PageNumber" and "State". Return value is ignored in case of this event.

The field "PageCount" returns the total count of report pages.

The field "PageNumber" returns the page number of the processed report.

The field "State" returns the value, indicating the state of the report's processing; the possible values are "Completed", "InProgress" and "Cancelled".

In Progress: Indicates the loading state of the report.

Cancelled: Indicates a states where loading of a report is cancelled.

Completed: Indicates a state where loading of a report is complete.

Copy Code

OnLoadProgress: function(e)
{
        if(e.State == "InProgress") {
                if(e.PageNumber == 10) {
                        alert("10 pages are loaded");
                }
        }
                    
        if(e.State == "Cancelled"){
                alert("Report processing is cancelled");
        }
                
        if(e.State == "Completed")// possible value are Completed, InProgress and Cancelled
        {
                alert("Report loading is completed, total page count is" + e.PageCount);
        }
                    
        //return value is ignored in this event
}

OnTargetViewChanging(TargetViewChangeEventArgs)

Raised while a report's view is changing.

The event handler receives an argument of type TargetViewChangedEventArgs containing data related to this event. The handler argument has the following fields - "CurrentView" and "NewView".

The field "CurrentView" returns the currently selected view value.

The field "NewView" returns the newly selected view value.

Copy Code

OnTargetViewChanging: function(e)
        {
                alert("Currently selected view is " + e.CurrentView);   //gets currently selected view, string
                alert("Newly selected view is " + e.NewView);           //gets newly selected view, string
                return false;                                           //cancelable event
        }

OnToolClick(ToolClickEventArgs)

Raised by clicking the toolbar button. Cancelable.

The event handler receives an argument of type ToolClickEventArgs containing data related to this event. The handler argument has the following field - "Tool".

The field "Tool" returns the name of a clicked button.

	Copy Code
OnToolClick: function(e) { alert(e.Tool); return false; }

OnCurrentPageChanged(CurrentPageChangeEventArgs)

Raised each time a current page is changed within the current view programmatically or by any user navigation command. This event is also raised when the current view (primary or secondary) is changed.

The event handler receives an argument of type CurrentPageChangedEventArgs containing data related to this event. The handler argument has the following fields - "PageNumber" and "ViaApi".

The field "PageNumber" contains the 1-based page number. The field "ViaApi" specifies whether the event is raised by setting the page number in the CurrentPage property.

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.