ejReportViewer

27 Sep 201924 minutes to read

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.
PPT	Specifies the PPT property in ExportOptions to get PPT option.
CSV	Specifies the CSV property in ExportOptions to get CSV option.
CustomItems	Specifies the customItems property in ExportOptions to get customItems 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.pptFormat enum

Specifies the ppt export format.

Name	Description
PowerPoint97to2003	Represents PowerPoint97to2003 version.
PowerPoint2007	Represents PowerPoint2007 version.
PowerPoint2010	Represents PowerPoint2010 version.
PowerPoint2013	Represents PowerPoint2013 version.

Default Value

• ej.ReportViewer.PPTFormats.PowerPoint97to2003

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            exportSettings:{ pptFormat: ej.ReportViewer.PPTFormats.PowerPoint2010}
        });
</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>

parameterSettings object

Specifies the parameter settings.

parameterSettings.delimiterChar string

Sets the separator when the multiSelectMode with delimiter option or checkbox is enabled with the dropdown. When you enter the delimiter value, the texts after the delimiter are considered as a separate word or query. The delimiter string is a single character and must be a symbol. Mostly, the delimiter symbol is used as comma (,) or semi-colon (;) or any other special character.

Default Value

• ”,”

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            parameterSettings: { delimiterChar: "," }
        });
</script>

parameterSettings.popupHeight string

Specifies the height of the combobox parameter popup list. By default, the popup height value is “152px”.

Default Value

• “152px”

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            parameterSettings: { popupHeight: "200px" }
        });
</script>

parameterSettings.popupWidth string

Specifies the width of the combobox parameter popup list. By default, the popup width sets based on the width of the component.

Default Value

• “auto”

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            parameterSettings: { popupWidth: "150px" }
        });
</script>

parameterSettings.itemWidth string

Specifies the width of the parameter item. By default, the item width value is set as “185px”.

Default Value

• “185px”

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            parameterSettings: { itemWidth: "250px" }
        });
</script>

parameterSettings.labelWidth string

Specifies the width of the parameter label. By default, the parameter label width value is set as “110px”.

Default Value

• “110px”

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            parameterSettings: { labelWidth: "auto" }
        });
</script>

printMode boolean

Enables and disables the print mode.

Default Value

• false

Example

html

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

printOption 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>

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>

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>

sizeToReportContent boolean

Render the ReportViewer height based on the report content size.

Default Value

• false

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            sizeToReportContent: true
        });
</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>

showExceptionsInDialog boolean

Gets or sets the showExceptionsInDialog for report viewer.

Default Value

• false

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer(
        {
            showExceptionsInDialog: true
        });
</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("PDF"); //Exports the report into PDF format.
</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>

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>

toolbarRendering

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

Example

js

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

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>

hyperlink

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>

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>

parameterUpdateStateChange

Fires when the dependent parameter value is changing in the parameter block. You can add custom user interface, loading indicator and modify the default progress text, using the ParameterUpdateStateChange event.

Name	Type	Description
argument	Object	Event parameters from ReportViewer. Name Type Description cancel boolean true if the event should be canceled; otherwise, false. handled boolean true, if the event handled by user; otherwise, false. state string The processing state. model object returns the report model containerId string The parameter block id. name string Its only to notify the the current parameter. prompt string Its only to notify the current parameter prompt value. progressText string The progress text that is displayed on the loading indicator.

Example

html

<div id="reportviewer"></div> 
<script>
    $("#reportviewer").ejReportViewer({
        parameterUpdateStateChange : function(args) {
            // Write a code block to perform any action when the parameter update state change.
        }
    });
</script>