Sep 15, 2017, 6:23 PM
[OPEN] [#1548] [4.4.0] GridPanel CellEditing Tab Navigation issue in IE
I'm running into an issue with a GridPanel that has a single editable cell, and using the tab key to navigate down the grid in IE. The grid briefly scrolls right horizontally and then back before advancing to the next row. The effect is that it's not smooth to use tab to advance down the grid. This issue does not happen in Chrome. Please try the following example in IE, click in the Price cell on the first row and hit the tab key to advance down.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public DateTime LastChange { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
private void BindData()
{
Store store = this.Store1;
store.DataSource = this.GetData();
store.DataBind();
}
private List<Company> GetData()
{
DateTime today = DateTime.Today;
return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = today },
new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = today },
new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = today },
new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = today },
new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = today },
new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = today },
new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = today },
new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = today },
new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = today },
new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = today },
new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = today },
new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = today },
new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = today },
new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = today }
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Cell Editing - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Cell Editing Grid Example</h1>
<p>This example shows how to enable users to edit the contents of a grid.</p>
<ext:GridPanel
runat="server"
Width="700"
Height="500"
Title="Edit Plants?"
Frame="true"
>
<Store>
<ext:Store runat="server" ID="Store1">
<Model>
<ext:Model runat="server" Name="Plant">
<Fields>
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="price" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Common Name"
DataIndex="Name"
Width ="300"
/>
<ext:Column
runat="server"
Text="Price"
DataIndex="Price"
Width="200"
Align="right">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="0" MaxValue="100000">
</ext:NumberField>
</Editor>
</ext:Column>
<ext:Column Text="Name2" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name3" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name4" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name5" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name6" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name7" DataIndex="Name" Width="300"></ext:Column>
<ext:Column Text="Name8" DataIndex="Name" Width="300"></ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
</body>
</html>
