Horizontal scrolling in mobile view on a Telerik Report Viewer

2 posts, 0 answers
  1. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2017

    Posted 19 Jul Link to this post

    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!

  2. Silviya
    Admin
    Silviya avatar
    183 posts

    Posted 24 Jul Link to this post

    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
Back to Top