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()">
|
-
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");
...
}
|
Available Flash Viewer properties
|
Note: 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. |
Available Flash Viewer methods
|
Note: Except for the below mentioned methods, {get|set}<Property Name>() method can be used for all the properties. See Using the 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.
Code example
| 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()">
|
|
Note: <EVENTS> are described in detail in the Available events list below. |
Available events
| 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.
Code example
|
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.
Code example
|
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.
Code example
|
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.
Code example
|
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.
Code example
|
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. |
Show All
Hide All