Won't Scroll Vertically on Mobile Devices

[Jugoslav]

I have a RadGrid with attribute RenderMode set to Mobile.
It works just fine and you can scroll vertically fine if I add "rough" data into the ItemTemplate e.g.

<ItemTemplate>
<%# Eval("SomeData") %>
</ItemTemplate>

However, if I add some extra tags around the data e.g. 

<ItemTemplate>
  <div class="text-center">
    <%# Eval("SomeData") %>
  </div>
</ItemTemplate>

I can't scroll the data any longer as it behaves like I am dragging the whole control. 

It also works fine if you use GridBoundColumn instead meaning, only when you add containers into the template column it stops scrolling on mobile devices. On desktops still works perfectly fine. Thank you

NOTE: I've noticed that if i carefully touch the space between the rows i can scroll up and down without problem but the content behaves just like i described above. Thx

[Latromi]

I had the exact same problem on Telerik ASP.NET Web Forms 2018 Q1

[Maria Ilieva]

Hi,

I tried to replicate the described issue locally but to no avail. Find my test applictaion attached and verify what the difference in your case is.

Regards,
Maria Ilieva
Telerik by Progress

[Latromi]

Hi!

I have the same problem and I beem able to reproduce using the test áppalication that you attached Maria Ilieva.

Adding some extra style on the element inside the "ItemTemplate", will make easy to realize the problem:

<ItemTemplate>
<div class="text-center" style="background:red;width:200px;height:200px">
      <asp:Label ID="lblOfficialDate" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
  </div>
</ItemTemplate>

I attached a image to illustrate the problem.

Please, help me! 🥺

[Latromi]

 

Hello!

Inspecting the source code, I found a solution!

I've override the function bellow, changing the value of "isDataRow" variable:

Telerik.Web.UI.RadGrid.prototype._dataDivMouseDown = function (e) {
  this._isTouchScrollInProgress = false;
  var target = $telerik.getTouchTarget(e);
  if (this._scrolling) {
      if (target) {
          var isDataRow = this._isDataRow(target); // <---- NEW CODE
          var touches = e.changedTouches ||
              (e.originalEvent ? e.originalEvent.touches :
                  e.rawEvent ? e.rawEvent.touches : false);
          if (!isDataRow || (touches && touches.length > 1)) {
              this._scrolling._dropDownTouchScroll.disable();
          }
      }
      if (this.get_allowCellSelection()) {
          this._scrolling._dropDownTouchScroll.enable();
      }
  }
};

This is the function that return the new value to "isDataRow" variable.

// Returns true if the provided element (elm) is a TD inside the DataDiv or some nested element
Telerik.Web.UI.RadGrid.prototype._isDataRow = function (elm) {
  while (elm) {
      if (elm.tagName.toLowerCase() == "td" && Telerik.Web.UI.Grid.IsChildOf(elm, this.GridDataDiv))
          return true;
      elm = elm.parentElement;
  }
  return false;
};

This worked fine on Telerik 2018 Q1

 

 

[Doncho]

Hi Daniel,

Thank you for the provided information and for the research you did.

I tested the page provided by Maria with our latest 2023.2.606 version and it seems to be working as expected with no additional coding, see http://somup.com/c0ifX5zoTx. Please let me know if you face the same issue with our latest version. In any case, the provided solution might serve others facing the problem. Thank you for investing the time in sharing it.

Please be aware that the 2018 Q1 version could be exposing a known vulnerability unless the recommended security settings are already applied. Even if you have the security settings applied we recommend upgrading to a newer version - at least the R1 2020 to ensure using a safe one. Details about the known weakness and the way to fix it you can find in the following article:

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-allows-javascriptserializer-deserialization 

I understand that upgrading from 2018 to the 2023 version might require some extra effort but I believe it is really worth it in terms of securing the application. We are ready to assist you with any obstacle you could face while upgrading.

I would recommend you follow the upgrade instructions in the Manual Update article.

Just before upgrading your project, review the following resources:

• The Known Issues and Important Changes thread lists changes and known regression issues that may affect your code.
• The Telerik Upgrade API Analyzer analyzes your C# code and notifies you of changes between your version and the new version.
• The UI for ASP.NET AJAX Release Notes lists all changes, fixes, new features, and controls.

I hope you will find this information useful.