[Solved] RadGrid - Issues with Scrolling on iPad

[Craig]

Hi there,

Firstly - yes I'm aware support for mobile Safari is shaky at best from googling about before posting this to try and find a solution to my RadGrid woes but well... I've been tasked to fix a part of our system which obviously is not working as it should on iPad from the subject of this post.

Issues: -

1. As soon as you move your finger(s) to attempt to scroll it actually lifts the whole row in an attempt to drag it seemingly.
2. The rest of the page starts to incrementally zoom out every moment you keep your finger(s) on the screen after the cell "picks up".

So in summation the only way to scroll currently is using AutoScrollOnDragDrop = true. Which as I'm sure you can understand is a nightmare considering while your trying to do this the screen is zooming out, causing other elements to distort and everything to shifted about...

Ok so, this is the aspx code we currently have for the RadGrid: -

<telerik:RadGrid runat="server" ID="TasksGrid" Width="100%" Height="642px" AutoGenerateColumns="false" AllowPaging="false" AllowFilteringByColumn="false" EnableViewState="false" CssClass="TasksGridClass">
     <GroupPanel Enabled="False">
         <PanelItemsStyle BorderColor="Red" />
     </GroupPanel>
     <MasterTableView ClientDataKeyNames="UniqueId,AllowOpenActivity">
         <GroupByExpressions>
             <telerik:GridGroupByExpression>
                 <SelectFields>
                     <telerik:GridGroupByField FieldName="ResourceName" HeaderText="Resource" />
                 </SelectFields>

                 <GroupByFields>
                     <telerik:GridGroupByField FieldName="ResourceName" HeaderText="Resource" />
                 </GroupByFields>
             </telerik:GridGroupByExpression>
         </GroupByExpressions>

         <Columns>
             <telerik:GridBoundColumn HeaderText="Tasks" Groupable="False"/>
         </Columns>

         <ItemTemplate>
             <%#TaskDisplayInfo.RenderGridRow(Container.DataItem)%>
         </ItemTemplate>
         <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
     </MasterTableView>
     <GroupingSettings CaseSensitive="False" />
     <ClientSettings AllowRowsDragDrop="False" AllowDragToGroup="False" >
         <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
         <Selecting AllowRowSelect="true" />
         <ClientEvents OnRowDblClick="OnTaskGridRowDoubleClick" />
         <Resizing AllowColumnResize="False" />
     </ClientSettings>
 </telerik:RadGrid>1

I've also attempted to add the following snippet found somewhere amongst the RadControl documentation with no joy (called in the init method called onload of the body): -

var touchScroll = false;
function initializeMobile() {
    if (Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender() && !touchScroll) {
        touchScroll = new Telerik.Web.UI.TouchScrollExtender('body', { autoScan: true });
        touchScroll.initialize();
    }
}

Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender = function () {
    return $telerik.isMobileSafari || $telerik.isAndroid;
};

So.... yea. From what I've read it is supposed to be a bit more functional than this so guessing I might be missing something.

Any input appreciated and thanks for reading

[Marin]

Hello,

 This a general issue that many people come across. The problem is that both the scrolling and the rows drag-drop feature are performed by the same gesture: putting your finger on the grid and sliding it up or down. Now obviously you do not need these features working simultaneously. Normally we cannot know whether by performing this gesture the user's intention is to scroll or to drag-drop a row. Depending on your requirements and the preferred behavior for the end user, you can distinguish the two feature in two general ways:
1. Perform each feature on a different touch event - in this case the scrolling and the drag drop will be triggered on different actions performed by the user. For example - the classic sliding of a finger up/down on the grid's area will always result in a scrolling action being performed (without any drag-drop fired). In case the user needs rows drag-drop he would first have to touch and hold one finger down for a certain amount of time (e.g 500ms) which will disable the scrolling and enable the rows drag-drop feature. from then on sliding the finger up/down will result only in rows drag-drop being performed. After lifting up the finger you would need to revert back to the default behavior by disabling the drag-drop and enabling again the scrolling.
Unfortunately this type of behavior is not automatically supported by RadGrid and may require some custom client-side code, jQuery event handling and use of the client-side API in order to achieve such behavior. This is not a trivial task and currently we do not have full code sample demonstrating this option.

2. Another option is to distinguish the two features by area or element on which the action is performed. In this case both features are still performed by the same gesture but on different HTML elements. Depending on the area the user has initially tapped on, either one or the other feature will be performed. This can be easily tested with the default grid infrastructure. You can open this demo on an iPad:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx
and enable the GridDragDropColumn (click on the checkbox in the upper right corner of the demo). Then you can perform scrolling by simply sliding a finger up and down on the grid's area, and rows drag-drop will be performed only when sliding a finger on the GridDragDropColumn shown on the left of the grid. For a better test experience we recommend having this demo setup on a separate page and using a larger icon for the GriDragDropColumn so that it's easier to manipulate on touch devices. The default icon on the demo is a little small and sometimes it is difficult to hit it properly on mobile devices.
This demonstrates how the two features are distinguished by performing the same action but on different areas of the control.

I hope this sheds some light on the simultaneous scrolling and drag-drop behavior of the control on mobile devices and the various possible options on how to distinguish the two features.

Regards,
Marin
Telerik