How to add interactivity to a report using action event handlers in HTML5-based report viewers

AUTHOR: Ivan Hristov

DATE POSTED: August 23, 2016

Article information
Article relates to	Telerik Reporting R3 2016+
Created by	Ivan, Telerik
Last modified	August 23th, 2016

PROBLEM
Handle interactive action events in Telerik Report Viewers.

SOLUTION
The report viewers provide handlers for three types of events that are associated with interactive actions – Executing, Enter and Leave. In this article we will show how to use these events to add more interactivity and allow further customization for your reports. We will use the HTML5Demo project that is shipped with your Telerik Reporting installation and is part of the CSharp.ReportExamples.VSxxxx  solution that can be found in %PROGRAMFILES(X86)%\ Telerik\Reporting R3 2016\Examples\{CSharp or VB}\ folder.

The report we chose for the demo is part of our ReportingLibrary and is called ProductSales. It shows a crosstab, grouped by product categories for rows and years for columns. We will show how to change the look of the HTML element under the mouse cursor and how to cancel a NavigateToReport action before it is executed, depending on a confirmation dialog.

 

• HTML5 Report Viewer

  Open the project and navigate to Index.html file. Add the following code snippet to the report viewer initialization script:
  interactiveActionExecuting: function (e, args) {

      if (args.action.Type === 'navigateToReport') {

          args.cancel = !confirm("You are about to navigate to report " + args.action.Value.Report + ".\r\n\nContinue?");

      }

  },

  interactiveActionEnter: function (e, args) {

      if (args.action.Type === 'navigateToReport') {

          $(args.element).css({ 'font-weight': 'bolder', 'background-color': 'darkSeaGreen' });

      }

  },

  interactiveActionLeave: function (e, args) {

      if (args.action.Type === 'navigateToReport') {

          $(args.element).css({ 'font-weight': 'normal', 'background-color': 'white' });

      }

  }
  
  This code block adds three handlers to the interactive action events. The first one – interactiveActionExecuting is triggered when the mouse cursor is over the HTML element, associated with an interactive action. In this case we check the type of the action and if it equals "navigateToReport", a confirmation message is displayed, asking if you want to leave the page, navigating to another report. The dialog result is assigned to the cancel argument and will be processed by the engine, determining if we decided to cancel navigation or not.
  The other two handlers - – interactiveActionEnter and interactiveActionLeave are raised when the mouse cursor enters or leaves the bounds of the HTML element, associated with an interactive action. We check the type of the action again (which could be unnecessary in case you only have one type of actions in your report) and change or restore the CSS style, applied on the element.
  

  The same approach can be used in all the HTML5-based report viewers with slight modifications, as shown below.

• HTML5 ASP.NET MVC Report Viewer

  When using MVC Report Viewer, you need to add the handler using the ClientEvents tag. Open the MvcDemo project and locate the Views/Home/index.cshtml file. Add the following code snippet to the report viewer initialization script:
  .ClientEvents(e =>

  {

      e.InteractiveActionExecuting("function (e, args) {"+

                      "if (args.action.Type === 'navigateToReport') {" +

                          "args.cancel = !confirm('You are about to navigate to report ' + args.action.Value.Report + '.\r\n\nContinue?');"+

                          "}"+

                      "}");

      e.InteractiveActionEnter("function (e, args) {" +

                      "if (args.action.Type === 'navigateToReport') {" +

                          "$(args.element).css({ 'font-weight': 'bolder', 'background-color': 'darkSeaGreen' });" +

                          "}" +

                      "}");

      e.InteractiveActionLeave("function (e, args) {" +

                      "if (args.action.Type === 'navigateToReport') {" +

                          "$(args.element).css({ 'font-weight': 'normal', 'background-color': 'white' });" +

                          "}" +

                      "}");

  }
  
  

  The JavaScript code here is written directly in method bodies for brevity - however, it is recommended to separate it in a script block or consider using external files depending on your client logic.

• HTML5 ASP.NET WebForms Report Viewer

  Here we will use the same approach - attach the event handlers using ClientEvents section. Open the {CSharp or VB}.WebFormsDemo project and locate the Default.aspx file. Modify the report viewer initialization script so it looks like this:
  <telerik:ReportViewer

      ID="reportViewer1"

      runat="server">

      <ReportSource

          IdentifierType="TypeReportSource"

          Identifier="Telerik.Reporting.Examples.CSharp.ProductSales, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">

      </ReportSource>

      <ClientEvents

          InteractiveActionExecuting="onInteractiveActionExecuting"

          InteractiveActionEnter="onInteractiveActionEnter"

          InteractiveActionLeave="onInteractiveActionLeave">

      </ClientEvents>

  </telerik:ReportViewer>

  <script>

      function onInteractiveActionExecuting(e, args) {

          if (args.action.Type === 'navigateToReport') {

              args.cancel = !confirm('You are about to navigate to report ' + args.action.Value.Report + '.\r\n\nContinue?');

          }

      }

      function onInteractiveActionEnter(e, args) {

          if (args.action.Type === 'navigateToReport') {

              $(args.element).css({ 'font-weight': 'bolder', 'background-color': 'darkSeaGreen' });

          }

      }

      function onInteractiveActionLeave(e, args) {

          if (args.action.Type === 'navigateToReport') {

              $(args.element).css({ 'font-weight': 'normal', 'background-color': 'white' });

          }

      }

  </script>

   

• When you're done, start the project and hover your mouse over the crosstab detail cells. You will see how the HTML-element under the mouse cursor has its background color changed as shown below:

In this article we demonstrated how to add interactivity and customizations to a report with a few lines of JavaScript. This approach can be used in all the current report viewers with slight modifications due to rendering technology.

For more details please check the following links:

Designing Reports - Actions

How to add interactivity to a report using action event handlers in WPF report viewer

How to add interactivity to a report using action event handlers in WinForms report viewer