This is a migrated thread and some comments may be shown as answers.
Horizontal scrolling in mobile view on a Telerik Report Viewer
1 Answer 13 Views
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 19 Jul 2018, 08:36 PM

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!

1 Answer, 1 is accepted

Sort by
0
Silviya
Telerik team
answered on 24 Jul 2018, 01:01 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Tim
Top achievements
Rank 1
Answers by
Silviya
Telerik team
Share this question
or