Need help with parameters in Report Designer

[Jennifer]

I am completely new to the report designer.  I have a couple of questions.  Here is one and I will post the other separately.

If I have a date parameter, is there a way to have it offer the user comparison operators (Is On, Between, On or After, On or Before)?  Would this list be another parameter in the query?  If so, is there a way to just provide a set list of strings that are not stored in the database?

 

Thanks,

 

Jennifer

[Silviya]

Hello Jennifer,

The Standalone Report Designer uses a built-in WinForms ReportViewer control. Parameters editors cannot be modified. 

However, when running the report in the viewer (for example HTML5ReportViewer) it uses a Kendo UI DateTimePicker when the datatype of a Report Parameter is set to a DateTime. By default, we do not implement validation properties for the built-in DateTimePicker. The Parameter Area is dynamically generated when the ReportViewer loads based on the number and type of Report Parameters in the report. 

Let say that you have two parameters StartDate and EndDate and you need to apply some comparison logic. To modify the way DateTime parameters are handled by viewer's parameters editors, I could suggest two approaches:
1. Introducing a custom parameters editor (How To: Create a custom parameter editor). Please consider the details and example in the Report Parameter DateTime Picker Format on UI forum thread. On the widget can be applied validation logic, in such manner the existing validation can handle the result.
2. Modify the default viewer's JS file (telerikReportViewer-x.x.x.x.js) containing the logic for parameters editors. The preview button performs the following actions:

$previewButton.on("click", function(e) {
    e.preventDefault();
    if (allParametersValid()) {
// this is the default validation logic that we use
        applyParameters();
    }
});

function applyParameters() {
//apply the selected values to the viewer's reportSource.parameters
    controller.setParameters($.extend({}, recentParameterValues));
//previewReport for the viewer
    controller.previewReport(false);
}

that could be modified as per your requirements. Please note that modifications in viewer's JS file needs to be merged manually on upgrade.
Other approach is to replace the default Preview button with your own, and to perform the above functionality in your custom Javascript methods - values validation, values applying and refresh of the viewer.

Regards,
Silviya
Progress Telerik

[Jennifer]

Thanks. Do you have any example projects of this using Angular 5+?  Also right now, I have a ReportingRestService running on a server, it references my ReportLibrary containing my report classes, and the Angular code just has html using the <tr-viewer>  where does the telerikReportView-x.x.x.x.js live?  Is there one?  Sorry for all the questions that are probably very basic.

 

-Jennifer

[Silviya]

Hi Jennifer,

As you are having Angular application, my recommendation is to use the first provided approach, i.e. by using a custom parameter editor. I recommend it because at the moment you can only modify the content of the package in node_modules and edit the viewer's JS logic with your own, but that would be troublesome to deploy or to upgrade.

I'm attaching a sample Angular 7 application along with a REST Service project (storing a sample report definition inside Reports folder) demonstrating the approach for creating custom parameter editor with added validation logic inside the onChange() event. Please note this is just an example where if you select a date before January 1 or after February 2 it would show a validation message "Date is not in range".

To run it successfully, you need to open the WebApplication1 project and run the Upgrade Wizard to upgrade/downgrade Telerik Reporting references to your current installed and then run the project (it would run on http://localhost:60963/api/reports/ URL). Then open the New Folder, where the Angular app is and run npm install and ng serve. The project would run on http://localhost:4200/ URL.

I hope you'll find it useful.

Regards,
Silviya
Progress Telerik

[Jennifer]

Thank you for the reply.  I have tried to run your project without success.  I updated my Telerik Reporting files with the latest version and I can open the report in Standalone designer.  But when I run the Angular project (with the webapplication api running)  I get the attached.

My Angular project is referencing "@progress/telerik-angular-report-viewer": "^6.19.123", which I believe is the latest.

I have also attached the report as viewed in the standalone viewer.

 

Thanks,

Jennifer

 

[Silviya]

Hello Jennifer,

Yes, the latest version of the Angular npm package is 6.19.123.
However, the Rest Service project should also include references from the same version in order to resolve the document with the specified schema.
Please upgrade Telerik Reporting references to 13.0.19.123 version. It can be downloaded from your user account. Once you log in, you should go to Downloads page, locate Progress Telerik Reporting product and when you click on it, a download page should appear, showing the latest main build and the latest internal build. 

However, in case the upgrade process is not an option for now, please refer to the modified project attached. It refers version 12.2 18.1017 in both angular application and Rest Service project.

Regards,
Silviya
Progress Telerik

[Jennifer]

Thank you.  I was able to get it working.