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
HTML5 Report Viewer
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:
$(args.element).css({
'font-weight'
:
'bolder'
,
'background-color'
'darkSeaGreen'
});
interactiveActionLeave:
'normal'
'white'
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
.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(
"$(args.element).css({ 'font-weight': 'bolder', 'background-color': 'darkSeaGreen' });"
e.InteractiveActionLeave(
"$(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
<
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"
</
ClientEvents
InteractiveActionExecuting
"onInteractiveActionExecuting"
InteractiveActionEnter
"onInteractiveActionEnter"
InteractiveActionLeave
"onInteractiveActionLeave"
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) {
$(args.element).css({ 'font-weight': 'bolder', 'background-color': 'darkSeaGreen' });
function onInteractiveActionLeave(e, args) {
$(args.element).css({ 'font-weight': 'normal', 'background-color': 'white' });
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.
Resources Buy Try