This is a migrated thread and some comments may be shown as answers.

Won't Scroll Vertically on Mobile Devices

2 Answers 176 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jugoslav
Top achievements
Rank 1
Jugoslav asked on 27 Jul 2016, 10:58 PM

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
Top achievements
Rank 2
Iron
commented on 29 Jun 2023, 12:52 PM | edited

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

2 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 01 Aug 2016, 01:33 PM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Latromi
Top achievements
Rank 2
Iron
answered on 29 Jun 2023, 01:17 PM | edited on 29 Jun 2023, 01:18 PM

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
Top achievements
Rank 2
Iron
commented on 29 Jun 2023, 05:00 PM | edited

 

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
Telerik team
commented on 04 Jul 2023, 11:52 AM

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:

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:

I hope you will find this information useful.

Tags
Grid
Asked by
Jugoslav
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Latromi
Top achievements
Rank 2
Iron
Share this question
or