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 168 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Tim asked on 19 Jul 2018, 08:36 PM


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?


1 Answer, 1 is accepted

Sort by
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;
        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
General Discussions
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question