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
<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
<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
<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.values array
Gets or sets the values of data source.
Default Value
- []
Example
<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>
enablePageCache boolean
Enables or disables the page cache of report.
Default Value
- false
Example
<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. |
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
<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
<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
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer(
{
exportSettings:{ wordFormat: ej.ReportViewer.WordFormats.Doc}
});
</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
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer({ isResponsive: true });
</script>
locale string
Specifies the locale for report viewer.
Default Value
- “en-US”
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer(
{
toolbarSettings:{click: "onToolbarClick"}
});
</script>
toolbarSettings.items enum
Specifies the toolbar items.
Name | Description |
---|---|
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
<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
<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
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer(
{
toolbarSettings:{ showTooltip: true }
});
</script>
toolbarSettings.templateId string
Specifies the toolbar template ID.
Default Value
- empty
Example
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer(
{
toolbarSettings:{ templateId: "customtoolbarId" }
});
</script>
zoomFactor number
Gets or sets the zoom factor for report viewer.
Default Value
- 1
Example
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer({ zoomFactor: 2 });
</script>
Methods
exportReport()
Export the report to the specified format.
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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.
|
Example
<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.
|
Example
<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.
|
Example
<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.
|
Example
<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.
|
Example
<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.
|
Example
<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.
|
Example
<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>
viewReportClick
Fires when click the View Report Button.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from reportviewer.
|
Example
<div id="reportviewer"></div>
<script>
$("#reportviewer").ejReportViewer({
viewReportClick: 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
<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>