First-Class Integration of Web Report Designer and Viewer

Telerik Reporting got a nice boost in the previous release: Users can flip between viewing and designing their reports inside the browser. See how to get this working for polished report creation.

Starting with Progress Telerik Reporting 2024 Q1 (18.0.24.130) release, the Web Report Designer component can be started as a standard Web Report Viewer and offers enhanced customization capabilities of the viewer itself. This extends the embedding scenarios covered by the component.

Web Report Designer Start Mode

Telerik Reporting Web Designer, part of Telerik Reporting, is a powerful web component that allows the users to create and manage report definitions easily. The preview mode of the designer embeds the Telerik HTML 5 Report Viewer control and empowers users to preview the reports they have designed with a click of a button. From the preview mode, the user can switch back to design mode, seamlessly edit the report and again preview the updated report.

The newly introduced initialization option of the Web Report Designer enables the developer to start the designer in a design mode (the default if omitted) or in a preview mode.

$(document).ready(function () {
  $("#webReportDesigner").telerik_WebReportDesigner({
    serviceUrl: "api/reportdesigner/",
    report: "Dashboard.trdp",
    // design/preview
    startMode: "preview"
  }).data("telerik_WebReportDesigner");
}); 

Web Report Designer Preview Mode Redesign

We have polished the preview mode of the Web Report Designer by removing the redundant components. Now the newly redesigned Web Report Designer preview contains only the Report Viewer and a button in the upper right corner to control mode-switching. This effectively changes the end-user experience to working with the well-known Report Viewer but with added design capabilities.

In design mode, a preview button located at the same position can take the user back to preview mode.

Learn more about the preview mode in the documentation.

Passing Parameters from Designer to Viewer

Report parameters are a commonly used capability of the report that can control the report’s content or can be used to filter the report’s data. With previous versions of the Telerik Reporting, it was not possible to pass initial values of the report parameters when previewing a report in the Web Report Designer.

That is why we have added the reportSourceParameters initialization option which gives the developer the ability to set the parameters to pass to the Report Viewer.

$(document).ready(function () {  
  $("#webReportDesigner").telerik_WebReportDesigner({  
    serviceUrl: "api/reportdesigner/",  
    report: "Dashboard.trdp",  
    reportViewerOptions: {  
      reportSourceParameters: {  
        ReportYear: 2002 
      }  
    }  
  }).data("telerik_WebReportDesigner");  
});

To avoid side effects, the reportSourceParameters option value gets applied only while the initially set report in the report initialization option is previewed. If the user opens a different report, these initial parameter values will not interfere. In the example above, the ReportYear parameter will be set only if the user previews the “Dashboard.trdp” report.

Report Viewer Customization in Report Designer Control

The report viewer control is embedded in the Report designer with its default behavior options. There are some initialization options that can be customized by the user like scaleMode, scale, viewMode and pageMode.

$(document).ready(function () {  
  $("#webReportDesigner").telerik_WebReportDesigner({  
    serviceUrl: "api/reportdesigner/",  
    report: "Dashboard.trdp",  
    reportViewerOptions: {  
      scaleMode: "SPECIFIC",  
      scale: 1.5,  
      viewMode: "INTERACTIVE",  
      pageMode: "CONTINUOUS_SCROLL"  
    }  
  }).data("telerik_WebReportDesigner");  
});

The other Report Viewer initialization options can be set through the newly introduced report designer events targeting viewer initialization and loading.

New Events for Report Viewer in the Report Designer Control

Before now, the customization options for the Report Viewer in the Web Report Designer control were quite limited. With the introduction of the new events viewerInitializing and viewerLoading in our 2024 Q1 release, we are proud to say that the developer can set all the viewer initialization options.

This enables the user to fully control the appearance and functionalities of the Report Viewer. What’s more, now the developer can subscribe to the Report viewer full list of events and implement the needed custom scenario.

viewerInitializing Event

This event is fired the first time when the user goes to the preview mode of the designer—only once for the Report Designer lifecycle. This will be the perfect place where the developer can set the Report Viewer initialization options. They will be applied for all previewed reports after that. Also, there is a possibility to subscribe to all the possible events of the viewer through its Report Viewer initialization options.

viewerLoading Event

This event is fired every time the user enters the preview mode of the designer. It’s suitable for setting up some of the parameters of the viewer that are specific to the currently previewed report. For example, passing up the parameter values applicable to the currently previewed report.

Let’s demonstrate the new events with an example.

$(document).ready(function () { 
  $("#webReportDesigner").telerik_WebReportDesigner({ 
    serviceUrl: "api/reportdesigner/", 
    report: "Dashboard.trdp", 
    viewerInitializing: onViewerInitializing, 
    viewerLoading: onViewerLoading 
  }).data("telerik_WebReportDesigner");  
}); 
 
function onViewerInitializing(e, args) { 
  // e: jQuery event; 
  // args: IViewerPreInitEventArgs -> 
  //      reportViewerOptions: All viewer's options available. 
  args.reportViewerOptions.parameters = { 
    editors: { 
      singleSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX, 
      multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX 
    } 
  }; 
  args.reportViewerOptions.renderingBegin = onViewerRenderingBegin; 
} 
 
function onViewerLoading(e, args) { 
  // e: jQuery event;
  // args: IViewerPreLoadEventArgs ->
  //      reportViewerOptions: report viewer's options. Available options:
  //          reportSource: report viewer's report source.
  //          viewMode: report viewer's view mode.
  //          pageMode: report viewer's page mode.
  var reportViewerOptions = args.reportViewerOptions;
  var report = reportViewerOptions.reportSource.report;
  if (report === "Dashboard.trdp") { 
    reportViewerOptions.reportSource.parameters = { ReportYear: 2003 };
    reportViewerOptions.viewMode = telerikReportViewer.ViewModes.PRINT_PREVIEW; 
  } else if (report === "Product Catalog.trdp") { 
    reportViewerOptions.pageMode = telerikReportViewer.PageModes.SINGLE_PAGE; 
    reportViewerOptions.viewMode = telerikReportViewer.ViewModes.INTERACTIVE; 
  }  
} 
 
function onViewerRenderingBegin(e) { 
  console.log('TRV rendering begin.'); 
}

In this example, in onViewerInitializing we have changed the default editor type for single-select and multi-select parameter editors to a combo box instead of a list view. Additionally, we’ll provide a handler to the ViewerRenderingBegin event, which will log a line in the console.

And in onViewerLoading we have set the report parameters for “Dashboard.trdp” report and we have changed the pageMode and viewMode for “Product Catalog.trdp” report.

Wrap-up

We are excited that Telerik Reporting now offers even better customer experience, giving our users a report viewer and a report designer web components that are fully integrated together and can be customized for every specific customer’s need.

Give Us Your Thoughts

Help us build the best reporting experience for you! Share your feedback and suggestions by visiting our Feedback Portal and Telerik Reporting Forum. We are eager to know what you think.

Want to Know More?

Telerik Reporting is a powerful .NET reporting tool that enables the users to easily design, generate and embed reports in their web or desktop applications.

Try it for free or check out our online demos to start your journey in reporting!