Create elegant and easy-to-design reports engineered to help you deliver information to your end users in the shortest possible time-without any need for legacy code. Introducing NetAdvantage Reporting, the industry's first WPF and Silverlight based design-time and rendering reporting tool, now releasing its HTML Report Viewer.
Infragistics NetAdvantage Reporting jQuery API Reference
ui.igReportViewer
Report Viewer
The HTML Report Viewer is designed to render NetAdvantage Reporting Reports within web applications. This viewer’s toolbar provides basic functionality for the interaction with the rendered Report.
Code Sample
<script type="text/javascript">
$(function () {
$("#viewer").igReportViewer({
renderSettings: {
definitionUri: "/MyReportLibrary;component/MyReport.igr",
serviceEndpointUri: "/ReportService.svc/ajaxAddress"
},
width: 720,
height: 520,
pageFit: 'fitToWidth'
});
});
</script>
<div id="viewer"></div>
Dependencies
-
autoRender
- Type:
- bool
- Default:
- true
If this property is set to "true", the report will start rendering immediately after the viewer is loaded.
Code Sample
//Initialize $(".selector").igReportViewer({ autoRender : true }); //Get var autoRender = $(".selector").igReportViewer("option", "autoRender"); //Set $(".selector").igReportViewer("option", "autoRender", true); -
createToolbar
- Type:
- bool
- Default:
- true
If this property is set to "true", the viewer will create a toolbar for performing usual visualization tasks on the current report.
Code Sample
//Initialize $(".selector").igReportViewer({ createToolbar : true }); //Get var createToolbar = $(".selector").igReportViewer("option", "createToolbar"); //Set $(".selector").igReportViewer("option", "createToolbar", true); -
gestureScrolling
- Type:
- enumeration
- Default:
- vieweronly
Indicates the way the viewer scroll interacts with the window scroll on touch devices.
Members
- viewerOnly
- Type:string
- Panning and swiping touch events performed inside the viewer only affect the viewer.
- fullWindow
- Type:string
- Panning touch events affect the window when the report page is on the edge, viewer swiping is disabled.
Code Sample
//Initialize $(".selector").igReportViewer({ gestureScrolling : "viewerOnly" }); //Get var gestureScrolling = $(".selector").igReportViewer("option", "gestureScrolling"); //Set $(".selector").igReportViewer("option", "gestureScrolling", "viewerOnly"); -
height
- Type:
- enumeration
- Default:
- null
Members
- null
- Type:object
- will fit the tree inside its parent container, if no other widths are defined.
- string
- The height width can be set in pixels (px) and percentage (%).
- number
- The height width can be set as a number in pixels.
Code Sample
//Initialize $(".selector").igReportViewer({ height : "500px" }); //Get var height = $(".selector").igReportViewer("option", "height"); //Set $(".selector").igReportViewer("option", "height", "500px"); -
pageFit
- Type:
- enumeration
- Default:
- off
Indicates the way the zoom is applied on the page.
Members
- off
- Type:string
- Use the current zoom scale.
- fitToWidth
- Type:string
- Set the zoom scale so that the viewer displays the whole width of the report page.
- fitToPage
- Type:string
- Set the zoom scale so that the viewer displays the whole report page.
Code Sample
//Initialize $(".selector").igReportViewer({ pageFit : "fitToWidth" }); //Get var pageFit = $(".selector").igReportViewer("option", "pageFit"); //Set $(".selector").igReportViewer("option", "pageFit", "fitToWidth"); -
parameters
- Type:
- array
- Default:
- null
- Elements Type:
Indicates the collection of parameter values that will be used to render the report.
Code Sample
//Initialize $(".selector").igReportViewer({ parameters: [{ Key: "numericParam", Value: 1 }, { Key: "stringParam", Value: "stringValue" }] }); //Get var parameters = $(".selector").igReportViewer("option", "parameters"); //Set $(".selector").igReportViewer("option", "parameters", [{ Key: "numericParam", Value: 1 }, { Key: "stringParam", Value: "stringValue" }]); -
renderSettings
- Type:
- object
- Default:
- {}
Code Sample
//Initialize $(".selector").igReportViewer({ renderSettings: { definitionUri: "/CustomersByCountry.igr", serviceEndpointUri: "http://mydomain.com/ReportServiceEndpoint/ajaxAddress/" }, }); //Get var renderSettings = $(".selector").igReportViewer("option", "renderSettings"); //Set $(".selector").igReportViewer("option", "renderSettings", { definitionUri: "/CustomersByCountry.igr", serviceEndpointUri: "http://mydomain.com/ReportServiceEndpoint/ajaxAddress/" });-
definitionUri
- Type:
- string
- Default:
- null
Indicates the URI of the report to be loaded and rendered by the viewer.
-
serviceEndpointUri
- Type:
- string
- Default:
- null
Indicates the URI of the service endpoint that will be invoked to get the report rendered.
-
width
- Type:
- enumeration
- Default:
- null
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample
//Initialize $(".selector").igReportViewer({ width : "500px" }); //Get var width = $(".selector").igReportViewer("option", "width"); //Set $(".selector").igReportViewer("option", "width", "500px"); -
zoomScale
- Type:
- number
- Default:
- 100
Indicates the zoom level of the report page being displayed in the viewer. This value ranges between 10 and 250 percent, where 100 is the actual page size.
Code Sample
//Initialize $(".selector").igReportViewer({ zoomScale : 50 }); //Get var zoomScale = $(".selector").igReportViewer("option", "zoomScale"); //Set $(".selector").igReportViewer("option", "zoomScale", 50);
For more information on how to interact with the NetAdvantage Reporting jQuery controls events, refer to
Using Events in jQuery Report Viewer
-
currentPageAvailable
- Cancellable:
- false
Event fired when the current page is available.
Function takes arguments evt and args.
Argument args.pageNumber indicates the number of the available page.Code Sample
//Bind $(".selector").igReportViewer().bind("currentPageAvailable", function (evt, args) { // Get the number of the available page. args.pageNumber; }); //Delegate $(document).delegate(".selector", "currentPageAvailable", function (evt, args) { ... }); -
currentPageChanged
- Cancellable:
- false
Event fired when the current page changed.
Function takes arguments evt and args.
Argument args.oldValue indicates the page number before the value changed.
Argument args.newValue indicates the page number after the value changed.Code Sample
//Bind $(".selector").igReportViewer().bind("currentPageChanged", function (evt, args) { // Get the page number before the value changed. args.oldValue; // Get the page number after the value changed. args.newValue; }); //Delegate $(document).delegate(".selector", "currentPageChanged", function (evt, args) { ... }); -
exportCanceled
- Cancellable:
- false
Event fired when an export process is canceled, either by user or by an export error.
Function takes arguments evt and args.
Argument args.error gets the exception that contains the information about the error.Code Sample
//Bind $(".selector").igReportViewer().bind("exportCanceled", function (evt, args) { // Get the exception that contains the information about the error. args.error; }); //Delegate $(document).delegate(".selector", "exportCanceled", function (evt,args) { ... }); -
exportCompleted
- Cancellable:
- false
Event fired when an export process is finished.
Function takes arguments evt and args.
Argument args.format gets the rendering format.
Argument args.downloadUri gets the download Uri.Code Sample
//Bind $(".selector").igReportViewer().bind("exportCompleted", function (evt, args) { // Get the rendering format. args.format; // Get the download Uri. args.downloadUri; }); //Delegate $(document).delegate(".selector", "exportCompleted", function (evt,args) { ... }); -
exportStarted
- Cancellable:
- false
Event fired when an export process is started.
Code Sample
//Bind $(".selector").igReportViewer().bind("exportStarted", function (evt) { ... }); //Delegate $(document).delegate(".selector", "exportStarted", function (evt) { ... }); -
firstPageAvailable
- Cancellable:
- false
Event fired when first page is available.
Code Sample
//Bind $(".selector").igReportViewer().bind("firstPageAvailable", function (evt) { ... }); //Delegate $(document).delegate(".selector", "firstPageAvailable", function (evt) { ... }); -
printFinished
- Cancellable:
- false
Event fired when printing is finished.
Function takes arguments evt and args.
Argument args.downloadUri gets the download Uri.
Argument args.canceled returnstrue if the printing process was cancelled,false otherwise.
Argument args.error returns the error that caused the printing process to be aborted. If no error occurred, returned value is null.Code Sample
//Bind $(".selector").igReportViewer().bind("printFinished", function (evt, args) { // Get the download Uri. args.downloadUri; // Check if the printing process was cancelled. args.canceled; // Get the error that caused the printing process to be aborted. args.error; }); //Delegate $(document).delegate(".selector", "printFinished", function (evt, args) { ... }); -
printStarted
- Cancellable:
- false
Event fired when printing is started.
Code Sample
//Bind $(".selector").igReportViewer().bind("printStarted", function (evt) { ... }); //Delegate $(document).delegate(".selector", "printStarted", function (evt) { ... }); -
processingCanceled
- Cancellable:
- false
Event fired when report processing is canceled, either by user, by error, or by refreshing the report.
Function takes arguments evt and args.
Argument args.error gets the error information that aborted report processing.Code Sample
//Bind $(".selector").igReportViewer().bind("processingCanceled", function (evt, args) { // Get the Error information that aborted report processing. args.error; }); //Delegate $(document).delegate(".selector", "processingCanceled", function (evt, args) { ... }); -
processingCompleted
- Cancellable:
- false
Event fired when report processing is completed.
Function takes arguments evt and args.
Argument args.totalPages gets the total number of pages in the report.Code Sample
//Bind $(".selector").igReportViewer().bind("processingCompleted", function (evt, args) { // Get the total number of pages in the report. args.totalPages; }); //Delegate $(document).delegate(".selector", "processingCompleted", function (evt, args) { ... }); -
processingProgress
- Cancellable:
- false
Event fired when report processing is progressing.
Function takes arguments evt and args.
Argument args.pagesProcessed gets the number of pages processed so far.Code Sample
//Bind $(".selector").igReportViewer().bind("processingProgress", function (evt, args) { // Get the number of pages processed so far. args.pagesProcessed; }); //Delegate $(document).delegate(".selector", "processingProgress", function (evt, args) { ... }); -
processingStarted
- Cancellable:
- false
Event fired when report processing is started.
Code Sample
//Bind $(".selector").igReportViewer().bind("processingStarted", function (evt, args) { ... }); //Delegate $(document).delegate(".selector", "processingStarted", function (evt, args) { ... }); -
reportProcessingRequested
- Cancellable:
- false
Event fired before starting the processing.
Code Sample
//Bind $(".selector").igReportViewer().bind("reportProcessingRequested", function (evt) { ... }); //Delegate $(document).delegate(".selector", "reportProcessingRequested", function (evt) { ... }); -
totalPagesChanged
- Cancellable:
- false
Event fired when the total number of pages changed.
Function takes arguments evt and args.
Argument args.totalPages indicates the total number of pages so far.Code Sample
//Bind $(".selector").igReportViewer().bind("totalPagesChanged", function (evt, args) { // Get the total number of pages so far. args.totalPages; }); //Delegate $(document).delegate(".selector", "totalPagesChanged", function (evt, args) { ... }); -
zoomScaleChanged
- Cancellable:
- false
Event fired when the zoom scale is changed.
Function takes arguments evt and args.
Argument args.oldValue represents the zoom value before it changed.
Argument args.newValue represents the zoom value after it changed.Code Sample
//Bind $(".selector").igReportViewer().bind("zoomScaleChanged", function (evt, args) { // Get the zoom value before it changed. args.oldValue; // Get the zoom value after it changed. args.newValue; }); //Delegate $(document).delegate(".selector", "zoomScaleChanged", function (evt, args) { ... });
-
cancel
- .igReportViewer( "cancel" );
Cancels the current report rendering and display.
Code Sample
$(".selector").igReportViewer("cancel"); -
cancelExport
- .igReportViewer( "cancelExport" );
Cancels the current exporting process.
Code Sample
$(".selector").igReportViewer("cancelExport"); -
cancelPrint
- .igReportViewer( "cancelPrint" );
Cancels the current printing process.
Code Sample
$(".selector").igReportViewer("cancelPrint"); -
currentPage
- .igReportViewer( "currentPage", [value:number] );
- Return Type:
- number
Gets or sets the number of the currently displayed page.
Throws an error 'reportHasNotFinishedLoadingErrorMsg' if there's still no page to display.- value
- Type:number
- Optional
- Number of the new page to display.
Code Sample
//Get var currentPage = $(".selector").igReportViewer("currentPage"); //Set $(".selector").igReportViewer("currentPage", 5); -
destroy
- .igReportViewer( "destroy" );
Destroys the igReportViewer widget.
Code Sample
$(".selector").igReportViewer("destroy"); -
exportReport
- .igReportViewer( "exportReport", renderingFormat:string );
Starts exporting the current rendered report using the specified exporting format.
- renderingFormat
- Type:string
- One of the available exporting formats: PDF, XPS, XLS or XLSX.
Code Sample
$(".selector").igReportViewer("exportReport", "PDF"); -
fitToPage
- .igReportViewer( "fitToPage" );
Sets the zoom scale so that the viewer displays the whole report page.
Code Sample
$(".selector").igReportViewer("fitToPage"); -
fitToWidth
- .igReportViewer( "fitToWidth" );
Sets the zoom scale so that the viewer displays the whole width of the report page.
Code Sample
$(".selector").igReportViewer("fitToWidth"); -
moveToFirstPage
- .igReportViewer( "moveToFirstPage" );
Sets the current displaying page as the first page of the report.
Throws an error 'reportHasNotFinishedLoadingErrorMsg' if there's still no page to display.Code Sample
$(".selector").igReportViewer("moveToFirstPage"); -
moveToLastPage
- .igReportViewer( "moveToLastPage" );
Sets the current displaying page as the last page of the report.
Throws an error 'reportHasNotFinishedLoadingErrorMsg' if there's still no page to display.Code Sample
$(".selector").igReportViewer("moveToLastPage"); -
moveToNextPage
- .igReportViewer( "moveToNextPage" );
Sets the new displaying page as the current page plus one.
If the current page is the last, it does nothing.
Throws an error 'reportHasNotFinishedLoadingErrorMsg' if there's still no page to display.Code Sample
$(".selector").igReportViewer("moveToNextPage"); -
moveToPreviousPage
- .igReportViewer( "moveToPreviousPage" );
Sets the new displaying page as the current page minus one.
If the current page is the first, it does nothing.
Throws an error 'reportHasNotFinishedLoadingErrorMsg' if there's still no page to display.Code Sample
$(".selector").igReportViewer("moveToPreviousPage"); -
printReport
- .igReportViewer( "printReport" );
Displays the printing dialog to print the rendered report.
Code Sample
$(".selector").igReportViewer("printReport"); -
refresh
- .igReportViewer( "refresh" );
Cancels, reloads and starts rendering the current report again.
Code Sample
$(".selector").igReportViewer("refresh"); -
render
- .igReportViewer( "render" );
Starts rendering the report.
Code Sample
$(".selector").igReportViewer("render");
-
ui-reportviewer-background
- Background of the main viewer div. Default value is 'ui-reportviewer-background'.
-
ui-reportviewer-empty-page
- Classes applied to loading page. Default ui value is 'ui-reportviewer-empty-page'.
-
ui-widget ui-reportviewer
- Classes applied to the top container element. Default value is 'ui-widget ui-reportviewer'.
-
ui-floatingtoolbar-subpanel-bottom
- Classes applied to the floating toolbar's bottom submenus. Default ui value is 'ui-floatingtoolbar-subpanel-bottom'.
-
ui-floatingtoolbar-subpanel-top
- Classes applied to the floating toolbar's top submenus. Default ui value is 'ui-floatingtoolbar-subpanel-top'.
-
ui-touchSlider-sliderGridline
- Page touch slider's gridline color and style. Default ui value is 'ui-touchSlider-sliderGridline'.
-
ui-reportviewer-loading
- Classes applied to viewer loading div. Default ui value is 'ui-reportviewer-loading'.
