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 2018 Link to this post


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

               .ReportSource((string)ViewBag.ReportString, new Dictionary<string, object> { { "Id", ViewBag.Id.ToString() } })


    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?


  2. Silviya
    Silviya avatar
    439 posts

    Posted 24 Jul 2018 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;
            function init(element) {
                if (typeof $.fn.kendoTouch === "function") {
                    $(element).find(".trv-page-wrapper").mousedown(function() {
                        ignoreTouch = true;

    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