Rank 1
I'm working in Chrome mobile. I'm having an issue where the grid does not scroll horizontally when the swiping is initiated over content that is a hyperlink. I attached event handlers to touchstart and touchend, and I can see that touchstart is called, and while touchmove is happening the grid does not scroll. If I enlarge the page to more than the window size it will actually scroll the page (but not the grid).
Scrolling in the grid works if pointer events are disabled on the hyperlink using CSS, but the click event doesn't work if this is done so it isn't a workable solution (pointer-events:none).
You have to click on the link just right to reproduce. I'm logging the events to the page for the first Test link in the grid to make this clear. Sometimes you think you are clicking on it, but it doesn't actually raise the touchstart event, and in that case scrolling works. However, when it does raise the touchstart event scrolling does not. This makes scrolling in the grid really inconsistent for users.
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="REN_AppTest_Grid.aspx.cs" Inherits="Efficio.Web.TestPages.REN_AppTest_Grid" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<style type="text/css">
a
{
/*pointer-events:none;*/
/*touch-action: none;*/
}
a:visited, a:link
{
color: #007AFF;
font-weight: bold;
}
a:active
{
color: red;
font-weight: bold;
}
a:hover
{
color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a href="REN_AppTest_Grid.aspx" style="font-size: 2em; margin-left: 100px;">Refresh</a>
<br/><br/>
<a id="EventTest" href="#" style="font-size: 2em; margin-left: 100px;">Event Test</a>
<br/><br/>
<telerik:RadScriptManager ID="smScriptManager" EnablePageMethods="true" runat="server">
<CacheSettings Enabled="false" />
<Scripts>
<asp:ScriptReference Path="~/lib/jquery/dist/jquery.min.js" />
<asp:ScriptReference Path="~/lib/jquery-migrate/jquery-migrate.min.js" />
<asp:ScriptReference Path="~/lib/jquery-browser/dist/jquery.browser.min.js" />
</Scripts>
</telerik:RadScriptManager>
Date: <%= DateTime.Now %>
<br /><br />
<asp:Panel ID="pnlGridScrolling" BorderWidth="1" Width="100%" BorderColor="Red" BorderStyle="Solid" runat="server">
<Efficio:EfficioGridView ID="grdOne" Width="700" RenderMode="Mobile" runat="server">
<ClientSettings>
<Scrolling AllowScroll="True" />
</ClientSettings>
<MasterTableView Font-Size="2em">
<Columns>
<Efficio:EfficioGridTemplateColumn HeaderText="C1">
<ItemTemplate>
<asp:HyperLink NavigateUrl="javascript: alert('clicked');" Text='<%# DataBinder.Eval(Container.DataItem, "Column2").ToString() %>' runat="server" />
</ItemTemplate>
</Efficio:EfficioGridTemplateColumn>
<Efficio:EfficioBoundColumn DataField="Column2" HeaderText="C2" />
<Efficio:EfficioBoundColumn DataField="Column3" HeaderText="C3" />
<Efficio:EfficioBoundColumn DataField="Column4" HeaderText="C4" />
<Efficio:EfficioGridTemplateColumn HeaderText="C5">
<ItemTemplate>
<%--<a href="#" style="touch-action: pan-x;">Test</a>--%>
<asp:HyperLink ID="lnkTest" NavigateUrl="NotHere.aspx" Text="Test" runat="server" />
</ItemTemplate>
</Efficio:EfficioGridTemplateColumn>
<Efficio:EfficioBoundColumn DataField="Column6" HeaderText="C6" />
<Efficio:EfficioBoundColumn DataField="Column7" HeaderText="C7" />
<Efficio:EfficioBoundColumn DataField="Column8" HeaderText="C8" />
<Efficio:EfficioBoundColumn DataField="Column9" HeaderText="C9" />
<Efficio:EfficioBoundColumn DataField="Column10" HeaderText="C10" />
</Columns>
</MasterTableView>
</Efficio:EfficioGridView>
<br/>
Status
<div id="statusPanel">
</div>
</asp:Panel>
</form>
<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
// Note that col & error are new to the HTML 5 spec and may not be
// supported in every browser. It worked for me in Chrome.
var extra = !col ? '' : '\ncolumn: ' + col;
extra += !error ? '' : '\nerror: ' + error;
// You can view the information in an alert to see things working like this:
alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);
// TODO: Report this error via ajax so you can keep track
// of what pages have JS issues
var suppressErrorAlert = true;
// If you return true, then error alerts (like in older versions of
// Internet Explorer) will be suppressed.
return suppressErrorAlert;
};
function touchstart(e)
{
var status = $('#statusPanel');
status.text(status.text() + ' touchstart');
//e.preventDefault();
}
function touchend(e)
{
var status = $('#statusPanel');
status.text(status.text() + ' touchend');
//e.preventDefault();
}
function click(e)
{
var status = $('#statusPanel');
status.text(status.text() + ' click');
//e.preventDefault();
}
function touchmove(e) {
var status = $('#statusPanel');
status.text(status.text() + ' touchmove');
//e.preventDefault();
}
function test()
{
var el = document.querySelector('#EventTest');
el.addEventListener("click", click, false);
el.addEventListener("touchstart", touchstart, false);
el.addEventListener("touchend", touchend, false);
el = document.querySelector('#grdOne_ctl00_ctl04_lnkTest');
el.addEventListener("click", click, false);
el.addEventListener("touchstart", touchstart, false);
el.addEventListener("touchend", touchend, false);
//el.addEventListener("touchmove", touchmove, false);
}
Sys.Application.add_load(test);
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Efficio.Web.TestPages
{
public partial class REN_AppTest_Grid : System.Web.UI.Page
{
#region Fields
private static readonly Random _random = new Random();
#endregion
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
grdOne.DataSource = GenerateTestDataTable();
grdOne.DataBind();
}
}
/// <summary>
/// Generate a data source that is a data table
/// </summary>
/// <returns>A data table object with test data</returns>
private static DataTable GenerateTestDataTable()
{
const int columnCount = 10;
const int numberOfRecordsToGenerate = 10;
DataTable dataSource = new DataTable();
for (var i = 1; i <= columnCount; i++)
{
dataSource.Columns.Add(new DataColumn(string.Format("Column{0}", i), typeof(int)));
}
// generate data
for (var i = 0; i < numberOfRecordsToGenerate; i++)
{
DataRow dataRow = dataSource.NewRow();
for (var j = 1; j <= columnCount; j++)
{
dataRow[string.Format("Column{0}", j)] = _random.Next(Int16.MinValue, Int16.MaxValue);
}
dataSource.Rows.Add(dataRow);
}
return dataSource;
}
}
}
1 Answer, 1 is accepted
I've already replied to your formal support ticket for this matter. You can expect a additional reply there.
Regards,
Eyup
Progress Telerik