ejReportViewer

The ReportViewer is a visualization control to view Microsoft SSRS RDL/RDLC files on a web page and it is powered by HTML5/JavaScript. It has support to bind DataSources/Parameters to the Reports and also supports exporting, paging, zooming and printing the report.

$(element).ejReportViewer()

Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        // Create ReportViewer
        $('#reportviewer').ejReportViewer();    
    </script>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:jquery.globalize.js

    • module:jquery.easing.1.3.js

    • module:jsrender.js

    • module:ej.core.js

    • module:ej.editor.js

    • module:ej.dialog.js

    • module:ej.treeview.js

    • module:ej.dropdownlist.js

    • module:ej.checkbox.js

    • module:ej.waitingpopup.js

    • module:ej.toolbar.js

    • module:ej.radiobutton.js

    • module:ej.splitter.js

    • module:ej.button.js

    • module:ej.chart.js

    • module:ej.datepicker.js

    • module:ej.map.js

    • module:ej.touch.js

    • module:ej.data.js

    • module:ej.circulargauge.js

    • module:ej.lineargauge.js

    • module:ej.reportviewer.js

    Members

    dataSources array

    Gets or sets the list of data sources for the RDLC report.

    Default Value

    • []

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ dataSources: [{name:"Menu Items",
        values:[{ OrderId: "21D60", FoodName: "Burger", Price: 20, Category: "Veg" },
                { OrderId: "21D61", FoodName: "Pizza", Price: 25, Category: "Non-Veg" },
                { OrderId: "21D63", FoodName: "Sandwiches", Price: 30, Category: "Non-Veg" },
                { OrderId: "21D65", FoodName: "Chicken Drum Sticks", Price: 23, Category: "Non-Veg" },
                { OrderId: "21D64", FoodName: "Fulka", Price: 15, Category: "Veg" }]}]
        });
    </script>

    dataSources.name string

    Gets or sets the name of the data source.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ dataSources: [name:"Menu Items",
        values:[{ OrderId: "21D60", FoodName: "Burger", Price: 20, Category: "Veg" },
                { OrderId: "21D61", FoodName: "Pizza", Price: 25, Category: "Non-Veg" },
                { OrderId: "21D63", FoodName: "Sandwiches", Price: 30, Category: "Non-Veg" },
                { OrderId: "21D65", FoodName: "Chicken Drum Sticks", Price: 23, Category: "Non-Veg" },
                { OrderId: "21D64", FoodName: "Fulka", Price: 15, Category: "Veg" }]]
        });
    </script>

    dataSources.value array

    Gets or sets the values of data source.

    Default Value

    • []

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ dataSources: [name:"Menu Items",
        value:[{ OrderId: "21D60", FoodName: "Burger", Price: 20, Category: "Veg" },
                { OrderId: "21D61", FoodName: "Pizza", Price: 25, Category: "Non-Veg" },
                { OrderId: "21D63", FoodName: "Sandwiches", Price: 30, Category: "Non-Veg" },
                { OrderId: "21D65", FoodName: "Chicken Drum Sticks", Price: 23, Category: "Non-Veg" },
                { OrderId: "21D64", FoodName: "Fulka", Price: 15, Category: "Veg" }]]
        });
    </script>

    enablePageCache boolean

    Enables or disables the page cache of report.

    Default Value

    • false

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ enablePageCache: false });            
    </script>

    exportSettings object

    Specifies the export settings.

    exportSettings.exportOptions enum

    Specifies the export formats.

    Name Description
    All Specifies the All property in ExportOptions to get all available options.
    PDF Specifies the PDF property in ExportOptions to get PDF option.
    Word Specifies the Word property in ExportOptions to get Word option.
    Excel Specifies the Excel property in ExportOptions to get Excel option.
    HTML Specifies the HTML property in ExportOptions to get HTML option.

    Default Value

    • ej.ReportViewer.ExportOptions.All

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                exportSettings:{ exportOptions: ej.ReportViewer.ExportOptions.Html | ej.ReportViewer.ExportOptions.Pdf }
            });            
    </script>

    exportSettings.excelFormat enum

    Specifies the excel export format.

    Name Description
    Excel97to2003 Specifies the Excel97to2003 property in ExcelFormats to get specified version of exported format.
    Excel2007 Specifies the Excel2007 property in ExcelFormats to get specified version of exported format.
    Excel2010 Specifies the Excel2010 property in ExcelFormats to get specified version of exported format.
    Excel2013 Specifies the Excel2013 property in ExcelFormats to get specified version of exported format.

    Default Value

    • ej.ReportViewer.ExcelFormats.Excel97to2003

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                exportSettings:{ excelFormat: ej.ReportViewer.ExcelFormats.Excel97to2003}
            });            
    </script>

    exportSettings.wordFormat enum

    Specifies the word export format.

    Name Description
    Doc Specifies the Doc property in WordFormats to get specified version of exported format.
    Dot Specifies the Dot property in WordFormats to get specified version of exported format.
    DOCX Specifies the DOCX property in WordFormats to get specified version of exported format.
    Word2007 Specifies the Word2007 property in WordFormats to get specified version of exported format.
    Word2010 Specifies the Word2010 property in WordFormats to get specified version of exported format.
    Word2013 Specifies the Word2013 property in WordFormats to get specified version of exported format.
    Word2007Dotx Specifies the Word2007Dotx property in WordFormats to get specified version of exported format.
    Word2010Dotx Specifies the Word2010Dotx property in WordFormats to get specified version of exported format.
    Word2013Dotx Specifies the Word2013Dotx property in WordFormats to get specified version of exported format.
    Word2007Docm Specifies the Word2007Docm property in WordFormats to get specified version of exported format.
    Word2010Docm Specifies the Word2010Docm property in WordFormats to get specified version of exported format.
    Word2013Docm Specifies the Word2013Docm property in WordFormats to get specified version of exported format.
    Word2007Dotm Specifies the Word2007Dotm property in WordFormats to get specified version of exported format.
    Word2010Dotm Specifies the Word2010Dotm property in WordFormats to get specified version of exported format.
    Word2013Dotm Specifies the Word2013Dotm property in WordFormats to get specified version of exported format.
    RTF Specifies the RTF property in WordFormats to get specified version of exported format.
    Txt Specifies the Txt property in WordFormats to get specified version of exported format.
    EPUB Specifies the EPUB property in WordFormats to get specified version of exported format.
    HTML Specifies the HTML property in WordFormats to get specified version of exported format.
    XML Specifies the XML property in WordFormats to get specified version of exported format.
    Automatic Specifies the Automatic property in WordFormats to get specified version of exported format.

    Default Value

    • ej.ReportViewer.WordFormats.Doc

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                exportSettings:{ wordFormat: ej.ReportViewer.WordFormats.Doc}
            });            
    </script>

    exportSettings.customItems array

    Add the custom icon item to the export options.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                exportSettings: {
                            customItems: [{
                                index: 2,
                                cssClass: '',
                                value: 'exportCustom',
                            },
                            {
                                index: 4,
                                cssClass: '',
                                value: 'exportCustom3',
                            }]
                        },
            });         
    </script>

    isResponsive boolean

    When set to true, adapts the report layout to fit the screen size of devices on which it renders.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ isResponsive: true });            
    </script>

    locale string

    Specifies the locale for report viewer.

    Default Value

    • “en-US”

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                locale: "it-IT"
            });             
    </script>

    pageSettings object

    Specifies the page settings.

    pageSettings.orientation enum

    Specifies the print layout orientation.

    Name Description
    Landscape Specifies the Landscape property in pageSettings.orientation to get specified layout.
    portrait Specifies the portrait property in pageSettings.orientation to get specified layout.

    Default Value

    • null

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                pageSettings:{ orientation: ej.ReportViewer.Orientation.Landscape }
            });
    </script>

    pageSettings.paperSize enum

    Specifies the paper size of print layout.

    Name Description
    A3 Specifies the A3 as value in pageSettings.paperSize to get specified size.
    portrait Specifies the A4 as value in pageSettings.paperSize to get specified size.
    B4_JIS Specifies the B4(JIS) as value in pageSettings.paperSize to get specified size.
    B5_JIS Specifies the B5(JIS) as value in pageSettings.paperSize to get specified size.
    Envelope_10 Specifies the Envelope #10 as value in pageSettings.paperSize to get specified size.
    Envelope_Monarch Specifies the Envelope as value in pageSettings.paperSize to get specified size.
    Executive Specifies the Executive as value in pageSettings.paperSize to get specified size.
    Legal Specifies the Legal as value in pageSettings.paperSize to get specified size.
    Letter Specifies the Letter as value in pageSettings.paperSize to get specified size.
    Tabloid Specifies the Tabloid as value in pageSettings.paperSize to get specified size.
    Custom Specifies the Custom as value in pageSettings.paperSize to get specified size.

    Default Value

    • null

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                pageSettings:{ paperSize: ej.ReportViewer.PaperSize.A4 }
            });
    </script>

    parameters array

    Gets or sets the list of parameters associated with the report.

    Default Value

    • []

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ 
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]       
        });
    </script>

    parameters.labels array

    Gets or sets the parameter labels.

    Default Value

    • null

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ 
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]
        });
    </script>

    parameters.name string

    Gets or sets the name of the parameter.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]
        });
    </script>

    parameters.nullable boolean

    Gets or sets whether the parameter allows nullable value or not.

    Default Value

    • false

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]
        });
    </script>

    parameters.prompt string

    Gets or sets the prompt message associated with the specified parameter.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ 
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the Color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]
        });
    </script>

    parameters.values array

    Gets or sets the parameter values.

    Default Value

    • []

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ 
            parameters: [{
                name:"Vehicle",
                labels:["Motor Bikes"],
                prompt:"Please select the color",
                values:["Red","Green","Blue","Yellow","Black"],
                nullable:false
            }]
        });
    </script>

    printMode boolean

    Enables and disables the print mode.

    Default Value

    • false

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                printMode:true
            });             
    </script>

    printOptions enum

    Specifies the print option of the report.

    Name Description
    Default Specifies the Default property in printOptions.
    NewTab Specifies the NewTab property in printOptions.
    None Specifies the None property in printOptions.

    Default Value

    • ej.ReportViewer.PrintOptions.Default

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ printOption: ej.ReportViewer.PrintOptions.Default });            
    </script>

    processingMode enum

    Specifies the processing mode of the report.

    Name Description
    Remote Specifies the Remote property in processingMode.
    Local Specifies the Local property in processingMode.

    Default Value

    • ej.ReportViewer.ProcessingMode.Remote

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ processingMode: ej.ReportViewer.ProcessingMode.Remote });            
    </script>

    renderMode enum

    Specifies the render layout.

    Name Description
    Default Specifies the Default property in RenderMode to get default output.
    Mobile Specifies the Mobile property in RenderMode to get specified output.
    Desktop Specifies the Desktop property in RenderMode to get specified output.

    Default Value

    • ej.ReportViewer.RenderMode.Default

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ renderMode: ej.ReportViewer.RenderMode.Default });            
    </script>

    reportPath string

    Gets or sets the path of the report file.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ reportPath: "~/App_Data/Sample.rdl" });            
    </script>

    reportServerUrl string

    Gets or sets the reports server URL.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ reportServerUrl: "http://mvc.syncfusion.com/reportserver" });            
    </script>

    reportServiceUrl string

    Specifies the report Web API service URL.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
        $("#reportviewer").ejReportViewer({ reportServiceUrl: "../api/RDLReport" });            
    </script>

    toolbarSettings object

    Specifies the toolbar settings.

    toolbarSettings.click string

    Fires when user click on toolbar item in the toolbar.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{click: "onToolbarClick"}
            });         
    </script>

    toolbarSettings.items enum

    Specifies the toolbar items.

    Name Description
    Print Specifies the Print as value in ToolbarItems to get specified item.
    Refresh Specifies the Refresh as value in ToolbarItems to get specified item.
    Zoom Specifies the Zoom as value in ToolbarItems to get specified item.
    FittoPage Specifies the FittoPage as value in ToolbarItems to get specified item.
    Export Specifies the Export as value in ToolbarItems to get specified item.
    PageNavigation Specifies the PageNavigation as value in ToolbarItems to get specified item.
    Parameters Specifies the Parameters as value in ToolbarItems to get specified item.
    PrintLayout Specifies the PrintLayout as value in ToolbarItems to get specified item.
    PageSetup Specifies the PageSetup as value in ToolbarItems to get specified item.

    Default Value

    • ej.ReportViewer.ToolbarItems.All

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{ items: ej.ReportViewer.ToolbarItems.All }
            });
    </script>

    toolbarSettings.showToolbar boolean

    Shows or hides the toolbar.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{ showToolbar: true }
            });         
    </script>

    toolbarSettings.showTooltip boolean

    Shows or hides the tooltip of toolbar items.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{ showTooltip: true }
            });         
    </script>

    toolbarSettings.templateId string

    Specifies the toolbar template ID.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{ templateId: "customtoolbarId" }
            });         
    </script>

    toolbarSettings.customItems array

    Add the custom icon item to the toolbar.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{
                     customItems: [{
                                groupIndex: 1,
                                index: 1,
                                itemType: 'Default',
                                cssClass: "e-icon e-mail e-reportviewer-icon CustomItem",
                                tooltip: { header: 'CustomItem', content: 'toolbaritems', value: 'CustomItem' },
                            }]
                 }
            });         
    </script>

    toolbarSettings.customGroups array

    Add the custom icon groups to the toolbar.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                toolbarSettings:{
                     customGroups: [{
                                items: [{
                                    itemType: 'Default',
                                    cssClass: "e-icon e-mail e-reportviewer-icon CustomGroup",
                                    tooltip: { header: 'CustomGroup', content: 'toolbargroups', value: 'CustomGroup' },
                                },
                                {
                                    itemType: 'Default',
                                    cssClass: "e-icon e-mail e-reportviewer-icon subCustomGroup",
                                    tooltip: { header: 'subCustomGroup', content: 'subtoolbargroups', value: 'subCustomGroup' },
                                }],
                                groupIndex: 3
                            }],
                 }
            });         
    </script>

    zoomFactor number

    Gets or sets the zoom factor for report viewer.

    Default Value

    • 1

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ zoomFactor:  2 });            
    </script>

    Methods

    exportReport()

    Export the report to the specified format.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.exportReport(); //Exports the reports
    </script>

    fitToPage()

    Fit the report page to the container.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.fitToPage(); // To fit the report page.
    </script>

    fitToPageHeight()

    Fit the report page height to the container.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.fitToPageHeight(); // To fit the report page height.
    </script>

    fitToPageWidth()

    Fit the report page width to the container.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.fitToPageWidth(); // To fit the report page width.
    </script>

    getDataSetNames()

    Get the available datasets name of the rdlc report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.getDataSetNames(); // To get the dataset names.
    </script>

    getParameters()

    Get the available parameters of the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer"); 
        reportviewerObj.getParameters(); // To get the parameters.
    </script>

    gotoFirstPage()

    Navigate to first page of report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.gotoFirstPage(); // To navigate to first page
    </script>

    gotoLastPage()

    Navigate to last page of the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.gotoLastPage(); // Navigate to the last page
    </script>

    gotoNextPage()

    Navigate to next page from the current page.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.gotoNextPage(); //To navigate to the next page
    </script>

    gotoPageIndex()

    Go to specific page index of the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.gotoPageIndex(5); // To navigate the specific page
    </script>

    gotoPreviousPage()

    Navigate to previous page from the current page.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.gotoPreviousPage(); // To navigate to the previous page
    </script>

    print()

    Print the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.print(); //To perform print operation.
    </script>

    printLayout()

    Apply print layout to the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.printLayout(); //Changes between print layout and normal modes.
    </script>

    refresh()

    Refresh the report.

    Example

  • html
  • <div id="reportviewer">ReportViewer</div> 
    <script>
        var reportviewerObj = $("#reportviewer").data("ejReportViewer");
        reportviewerObj.refresh(); // To refresh the report.
    </script>

    Events

    destroy

    Fires when the report viewer is destroyed successfully.If you want to perform any operation after destroying the reportviewer control,you can make use of the destroy event.

    Name Type Description
    argument object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div>
    <script>
        $("#reportviewer").ejReportViewer({
            destroy: function (args) {
                // Write a code block to perform any operation after destroy of reportviewer.
            }
        });
    </script>

    drillThrough

    Fires during drill through action done in report.If you want to perform any operation when a drill through action is performed, you can make use of the drillThrough event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    actionInfo Object returns the actionInfo's parameters bookmarkLink, reportName, parameters.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            drillThrough: function (args) {
                // Write a code block to perform any operation when drill through action occurs in report.
            }
        });                   
    </script>

    renderingBegin

    Fires before report rendering is completed.If you want to perform any operation before the rendering of report,you can make use of the renderingBegin event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>  
        //rendering begin event for report.               
        $("#reportviewer").ejReportViewer({
            renderingBegin:function(args) {
                // Write a code block to perform any operation before rendering.
            }
        });                 
    </script>

    renderingComplete

    Fires after report rendering completed.If you want to perform any operation after the rendering of report,you can make use of this renderingComplete event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    model object returns the report model.
    type string returns the name of the event.
    reportParameters object returns the collection of parameters.
    reportParameters object returns the collection of parameters.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        //rendering complete event for reportviewer control.
        $("#reportviewer").ejReportViewer({ 
            renderingComplete:function(args) {
                // Write a code block to perform any operation after rendering completed.
            }
        });            
    </script>

    reportError

    Fires when any error occurred while rendering the report.If you want to perform any operation when an error occurs in the report, you can make use of the reportError event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    error string returns the error details.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            reportError: function (args) {
                // Write a code block to perform any operation when report error occurs.
            }
        });                         
    </script>

    reportExport

    Fires when the report is being exported.If you want to perform any operation before exporting of report, you can make use of the reportExport event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            reportExport:  function (args) {
                // Write a code block to perform any action before exporting of report.
            }
        });           
    </script>

    reportLoaded

    Fires when the report is loaded.If you want to perform any operation after the successful loading of report, you can make use of the reportLoaded event.

    Name Type Description
    argument Object event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            reportLoaded: function(args) {
                // Write a code block to perform any action when the report is loaded successfully.
            }
        });             
    </script>

    showError

    Fires when user clicks on a failed report item in the rendered report, before displaying error details dialog. If you want to show custom error detail or perform any action before viewing error detail, you can make use of the showError event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    errorCode string returns the error code.
    message string returns the error message.
    detail string returns the detailed error information.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            showError: function (args) {
                // Write a code block to perform any operation when user clicks a failed item in a report.
            }
        });
    </script>

    viewReportClick

    Fires when click the View Report Button.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    parameters Object returns the parameter collection.
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            viewReportClick:  function (args) {
                // Write a code block to perform any operation after destroy of reportviewer.
            }
        });           
    </script>

    ajaxBeforeLoad

    Fires before the ajax request process started.

    Name Type Description
    argument Object Event ajax process from reportviewer.
    Name Type Description
    reportViewerToken string returns the reportViewerToken.
    serviceAuthorizationToken string returns the serviceAuthorizationToken.
    headerReq Object Send the headerReq collection.
    headers Object Send the headers collection.
    data string Send the custom data.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            ajaxBeforeLoad:  function (args) {
                // Write a code block to perform any operation after destroy of reportviewer.
            }
        });           
    </script>

    ajaxSuccess

    Fires when ajax post call succeed.

    Name Type Description
    argument Object Event ajax process from reportviewer.
    Name Type Description
    data object returns the success data.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            ajaxSuccess:  function (args) {
                // Write a code block to perform any operation after destroy of reportviewer.
            }
        });           
    </script>

    ajaxError

    Fires when ajax request failed.

    Name Type Description
    argument Object Event ajax process from reportviewer.
    Name Type Description
    msg string returns the error details

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            ajaxError:  function (args) {
                // Write a code block to perform any operation after destroy of reportviewer.
            }
        });           
    </script>

    serviceAuthorizationToken string

    Specifies the token for authorizing reporting service url to process the reports.

    Default Value

    • empty

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>
          $(function () {
                var dataValue = "";
                var apiRequest = new Object();
                apiRequest.password = "demo";
                apiRequest.userid = "guest";
                $.ajax({
                    type: "POST",
                    url: "http://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);
                        $("#reportviewer").ejReportViewer(
                            {
                                reportServiceUrl: "http://reportserver.syncfusion.com/ReportService/api/Viewer",
                                serviceAuthorizationToken: token["token_type"] + " " + token["access_token"],
                                reportPath: '/Sample Reports/Company Sales'
                            });
                    }
                });
            });            
    </script>

    toolbarRendering

    This event will be triggered on rendering the Report Viewer toolbar.

    Example

  • js
  • $("#reportviewer").ejReportViewer({
            toolbarRendering: function(args) {
                // Write your block of code 
            }
        });

    enableParameterBlockScroller boolean

    Enables and disables the parameter block scroller.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                enableParameterBlockScroller: false
            });             
    </script>

    enableDatasourceBlockScroller boolean

    Enables and disables the data source credential block scroller.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                enableDatasourceBlockScroller: false
            });             
    </script>

    autoRender boolean

    Enables and disables the rendering of Viewer when default values are specified for the parameters.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                autoRender: false
            });             
    </script>

    enableNotificationBar boolean

    Enables and disables the Error Notification bar.

    Default Value

    • true

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                enableNotificationBar: false
            });             
    </script>

    enableDropDownSearch boolean

    Enables and disables the drop-down parameter search.

    Default Value

    • false

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                enableDropDownSearch: true
            });             
    </script>

    enablePageVirtualization boolean

    Enables and disables the PageVirtualization.

    Default Value

    • false

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>          
        $("#reportviewer").ejReportViewer(
            {
                enablePageVirtualization: true
            });             
    </script>

    exportProgressChanged

    Fires when the export progress is changed. To perform any operation when the export progress is changed, use the exportProgressChanged event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    format string returns the export format
    stage string returns the stage of export processing.
    handled boolean true if the event should be handled; otherwise, false.
    containerId string returns ReportViewer container Id.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            exportProgressChanged : function(args) {
                // Write a code block to perform any action when the export progress changed.
            }
        });             
    </script>

    printProgressChanged

    Fires when the print progress is changed. To perform any operation when the print progress is changed, use the printProgressChanged event.

    Name Type Description
    argument Object Event parameters from ReportViewer.
    Name Type Description
    stage string returns the stage of export processing.
    currentPage string returns the currentPage value
    totalPages string returns the totalPages value
    handled boolean true if the event should be handled; otherwise, false.
    containerId string returns ReportViewer container Id.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            printProgressChanged : function(args) {
                // Write a code block to perform any action when the print progress changed.
            }
        });             
    </script>

    exportItemClick

    Fires when the export items are clicked. To perform any operation when the export items are clicked, use the exportItemClick event.

    Name Type Description
    argument Object Event parameters from ReportViewer.
    Name Type Description
    value string returns the export format value.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            exportItemClick : function(args) {
                // Write a code block to perform any action when the export item clicked.
            }
        });             
    </script>

    toolBarItemClick

    Fires when the toolbar items are clicked. To perform any operation when the toolbar items are clicked, use the toolBarItemClick event.

    Name Type Description
    argument Object Event parameters from ReportViewer.
    Name Type Description
    target string returns the toolbar clicked item name .
    cssClass string returns the CSS class name specified for the toolbar item
    groupIndex string returns the Toolbar item rendered group index
    Index string returns the Toolbar item rendered index
    value string returns the Toolbar item value.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            toolBarItemClick : function(args) {
                // Write a code block to perform any action when the toolbar item clicked.
            }
        });             
    </script>

    Fires when the hyperlink action is performed in the report. To perform any operation during the hyperlink action, use the hyperlink event.

    Name Type Description
    argument Object Event parameters from ReportViewer.
    Name Type Description
    cancel boolean true if the event should be canceled; otherwise, false.
    actionInfo Object returns the actionInfo's hyperLink detail
    model object returns the report model.
    type string returns the name of the event.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({ 
            hyperlink: function (args) {
                // Write a code block to perform any operation when hyperlink action occurs in report.
            }
        });                   
    </script>

    reportPrint

    Fires when the report print action is performed in the report. To perform any operation during the report print action, use the ReportPrint event.

    Name Type Description
    argument Object Event parameters from reportviewer.
    Name Type Description
    isStyleLoad boolean true if you have to load the external style file; otherwise, false.

    Example

  • html
  • <div id="reportviewer"></div> 
    <script>        
        $("#reportviewer").ejReportViewer({
            reportPrint : function(args) {
                // Write a code block to perform any action when the export item clicked.
            }
        });             
    </script>