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 Infragistics Reporting, the industry's first WPF and Silverlight based design-time and rendering reporting tool. Also providing a lightweight HTML5 Report Viewer to fully enhance your web experience with reporting.

Infragistics Reporting jQuery API Reference

ui.igReportViewer

ui.igReportViewer_image

Report Viewer

The HTML Report Viewer is designed to render Infragistics 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

jquery-1.4.4.js +
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.button.js
jquery.ui.dialog.js
jquery.ui.position.js
jquery.effects.core.js
jquery.effects.scale.js
jquery.effects.fade.js
jquery.effects.highlight.js
modernizr-2.5.2.js +
infragistics.util.js
infragistics.dataSource.js
infragistics.dv.core.js
infragistics.dvcommonwidget.js
infragistics.ui.chart.js
infragistics.chart_categorychart.js
infragistics.chart_financialchart.js
  • 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 Infragistics Reporting jQuery controls events, refer to
Using Events in jQuery Report Viewer

Show Details
  • 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 returns true 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) {
       ...
    });
    
    //Delegate
    $(document).delegate(".selector", "processingStarted", function (evt) {
       ...
    });
  • 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'.