Horizontal scrolling in mobile view on a Telerik Report Viewer

[Tim]

Hello.

I have a report viewer widget that I place on a page using the follow bit of razor code:

@(Html.TelerikReporting().ReportViewer()
           .Id("reportViewer1")
           .ServiceUrl(Url.Content("~/api/reports"))
           .ReportSource((string)ViewBag.ReportString, new Dictionary<string, object> { { "Id", ViewBag.Id.ToString() } })
           .ViewMode(ViewMode.PrintPreview)
           .ScaleMode(ScaleMode.Specific)
           .Scale(1.0)
           .PersistSession(false)
           .PrintMode(PrintMode.AutoSelect)
           .TemplateUrl(Url.Content("~/ReportViewer/ReportViewerTemplate.html")))

 

In a desktop view, there's plenty of room and control to scroll around.

When I view as mobile (using Chrome's developer tools), I am not able to "scroll" left or right, so I am stuck with whatever is in the left-most column.

However, if I start using the desktop view, then switch to responsive mode, I can scroll left/right.

It seems to be that this is getting set when the page is loaded as a mobile browser:

<div class="trv-page-wrapper active" data-role="touch" style="touch-action: none;">

 

and the style tag is not getting set, or changed, when loading on the desktop.

If I manually remove the touch-action: none; style, the page functions as expected.

I'm not sure how to proceed to address this.  I can't apply a style sheet, since the style is inline.  Is there a event that gets fired when the report is finished being rendered, and I can change it there?

Thanks!

[Silviya]

Hello Tim,

Indeed the inline style touch-action: none; is disabling the touch events on mobile mode. This is a known issue that will be released in our next internal build version.

Till then, you can manually modify the telerikReportViewer.js file by removing .find(".trv-page-wrapper") part from the initialization function of the ​touch behavior to allow horizontal scrolling:

(function(trv, $, window, document, undefined) {
    "use strict";
    trv.touchBehavior = function(dom, options) {
        var startDistance, ignoreTouch;
        init(dom);
        function init(element) {
            if (typeof $.fn.kendoTouch === "function") {
                $(element).find(".trv-page-wrapper").mousedown(function() {
                    ignoreTouch = true;
                })

Regards,
Silviya
Progress Telerik