Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Report parameters

Provides property options to pass or set report parameters default values at run-time using the parameters property. You can set the report parameters while creating the Report Viewer control in a script or in the Web API Controller.

In this tutorial, the sales-order-dtail.rdl report is used, and it can be downloaded from here.

Set parameter at client

The parameters property takes the JSON array value input with parameter details.

  1. Set the default value data to the values property and name of the report parameter to the name property.

    The parameter name is case sensitive, it should be same as available in the report definition.

  2. The following code example illustrates how to set report parameter in the script.

    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "/api/ReportViewer",
                reportPath: '~/Resources/docs/sales-order-detail.rdl',
                parameters: [{ name: 'SalesOrderNumber', labels: ['SO50751'], values: ['SO50751'] }]
            });
        });
</script>

    You can view the Web API service used in the above code from the Reporting Service git hub location. For more information, see Samples and demos.

  • Build and run the application. Preview and edit the result using the following.
index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
                    parameters: [{ name: 'SalesOrderNumber', labels: ['SO50751'], values: ['SO50751'] }]
                });
});

Set parameters in Web API Controller

To set parameter default value in Web API Controller, use the following code in the OnReportLoaded method.

[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
    List<BoldReports.Web.ReportParameter> userParameters = new List<BoldReports.Web.ReportParameter>();
    userParameters.Add(new BoldReports.Web.ReportParameter()
    {
        Name = "SalesOrderNumber",
        Values = new List<string>() { "SO50756" }
    });
    reportOption.ReportModel.Parameters = userParameters;
}

The Report Parameters name should be case sensitive

Get report parameter

The ReportHelper class provides methods that help you to get the report parameters used in the report. The following helper methods used to get parameter with or without values.

Methods Description
GetParameters Returns the parameters that are used in the current report without the processed values.
GetParametersWithValues Returns the report parameters with processed data values that are used in the current report.

You can use the following code sample to get parameter names and set parameter default values.

    public class ReportsApiController : ApiController, IReportController
    {
        Dictionary<string, object> jsonArray = null;
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            jsonArray = jsonResult;
            return ReportHelper.ProcessReport(jsonResult, this);
        }

        ....
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            var reportParameters = ReportHelper.GetParameters(jsonArray, this);
            List<BoldReports.Web.ReportParameter> modifiedParameters = new List<BoldReports.Web.ReportParameter>();

            if (reportParameters != null)
            {
                foreach (var rptParameter in reportParameters)
                {
                    modifiedParameters.Add(new BoldReports.Web.ReportParameter()
                    {
                        Name = rptParameter.Name,
                        Values = new List<string>() { "SO50756" }
                    });
                }

                reportOption.ReportModel.Parameters = modifiedParameters;
            }
        }
    }

Set date range for date parameter

The properties minDateTime and maxDateTime in the parameterSettings are used to set date range for date parameters in a report.

Property Description
minDateTime Specify minimum range value of a date parameter
maxDateTime Specify maximum range value of a date parameter

Refer to the following code sample to set data range using the Report Viewer component API’s.

index.js
index.html
$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
        parameterSettings: {
          minDateTime: "3/1/2003",
          maxDateTime: "4/30/2003"
        }
    });
});
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>

The above code sets date range for all the date parameters used in the report.

To set different date range for each date parameter used in the report, register the event beforeParameterAdd and specify range based on parameter name as in below code sample.

beforeparameteradd.js
beforeparameteradd.html
$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
        beforeParameterAdd: function (args) {
            if (args.parameterModel.Name === "StartDate")
            {
             args.parameterSettings.minDateTime = new Date("4/5/2003 5:00:00 AM");
             args.parameterSettings.maxDateTime = new Date("4/15/2003 5:00:00 AM");
            }
             if (args.parameterModel.Name === "EndDate")
            {
             args.parameterSettings.minDateTime = new Date("5/10/2003 5:00:00 AM");
             args.parameterSettings.maxDateTime = new Date("5/20/2003 5:00:00 AM");
            }
        }
    });
});
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="beforeparameteradd.js"></script>
    </body>

Set date time display format for date parameter

The properties dateTimeFormat and timeDisplayFormat in the parameterSettings are used to set date and time format to be displayed in the DateTimePicker control in a report.

Format Display in DateTimePicker
Short Date and Time - d/M/yy h:mm tt 9/12/2014 2:04 PM
Medium Date - d MMM yy h:mm tt 12 Sep 14 2:04: PM
Full Date and short time - dddd, MMMM dd, yyyy HH:mm tt Friday, September 12,2014 2:04 PM
Full Date and Long Time - dddd, MMMM dd, yyyy HH:mm:ss tt Friday, September 12,2014 2:04:00 PM
UTC - yyyy-MM-dThh:mm:ssz 2014-09-12T2:04:00+5

Refer to the following code sample to set date and time value to be display, using the Report Viewer component API’s.

index.js
index.html
$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
        parameterSettings: {
            dateTimeFormat: "d/M/yyyy h:mm tt",
            timeDisplayFormat: "HH:mm",
            timeInterval: 60
        }
    });
});
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>

The above code sets date and time value to be display for all the date parameters used in the report.

To set different date and time value to be display for each date parameter used in the report, register the event beforeParameterAdd and specify date and time value based on parameter name as in below code sample.

beforeparameteradd.js
beforeparameteradd.html
$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
        beforeParameterAdd: function (args) {
            if (args.parameterModel.Name === "StartDate")
            {
                args.parameterSettings.dateTimeFormat = "d/M/yyyy h:mm tt";
                args.parameterSettings.timeDisplayFormat = "HH:mm";
                args.parameterSettings.timeInterval = 60;
            }
             if (args.parameterModel.Name === "EndDate")
            {
                args.parameterSettings.dateTimeFormat = "d/M/yyyy tt h:mm tt";
                args.parameterSettings.timeDisplayFormat = "HH:mm";
                args.parameterSettings.timeInterval = 60;
            }
        }
    });
});
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="beforeparameteradd.js"></script>
    </body>

Change the Parameter drop-down height and width

The parameterSettings helps you to change the height and width of the parameter available in parameter panel.

<div id="viewer"></div>
<script>
    $("#viewer").boldReportViewer({
            parameterSettings: {
                popupHeight: "200px",
                popupWidth: "150px",
            }
             });
</script>
</html>

Hide a Parameter scroller

The enableparameterblockscroller helps you to hide the scrollbar in parameter panel.

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

Hide a Parameter Pane on load

The parameterSettings helps you to hide and show the parameter block.

<div id="viewer"></div>
<script>
    $("#viewer").boldReportViewer(
        {
           parameterSettings: { hideParameterBlock: true}
        });
</script>
</html>

Change the Parameter Item Width and Label Width

The parameterSettings helps you to change the parameter Item width and label width.

<div id="viewer"></div>
<script>
    $("#viewer").boldReportViewer(
        {
           parameterSettings: {
               itemWidth: '250px',
               labelWidth: 'auto'
               }
        });
</script>
</html>

Access the hidden or internal parameter information

The accessInternalValue property in the parameterSettings helps you to expose the hidden or internal report parameter information used in report to the user.

<div id="viewer"></div>
<script>
    $("#viewer").boldReportViewer(
        {
           parameterSettings:{ accessInternalValue: true }
        });
</script>
</html>

Set the report parameter visibility in Web API Controller

The Hidden property of ReportParameter allows you to show or hide the parameter at the top of the report viewer panel. The following code example shows hiding a report parameter in the Web API controller’s OnReportLoaded method.

    [NonAction]
    public void OnReportLoaded(ReportViewerOptions reportOption)
    {
        var reportParameters = ReportHelper.GetParameters(jsonArray, this);
        List<BoldReports.Web.ReportParameter> modifiedParameters = new List<BoldReports.Web.ReportParameter>();

        if (reportParameters != null)
        {
            foreach (var rptParameter in reportParameters)
            {
                modifiedParameters.Add(new BoldReports.Web.ReportParameter()
                {
                    Name = rptParameter.Name,
                    Hidden = true
                });
            }

            reportOption.ReportModel.Parameters = modifiedParameters;
        }
    }

See Also

Parameter Custom Properties