Jul 17, 2019, 10:39 PM
[CLOSED] Grid with locking columns : screen repositioning issue
I have user complaints the horizontal scroll bar auto moves while tabbing through the cells.
When grid has no locking column, the scroll bar moves only when tabbing to the end of screen. This is what we expected.
With locked columns, the scroll bar kept moving while cursor is still in the center of the screen.
We had grid with many columns, the screen starts shifting while user only tabs on the first a few columns. It hides many columns that user needs to see.
I can reproduce the issue from your example code:
click on 1st column(Company name), press TAB multiple times, the screen starts shift when it reaches "Last Update" column.
Unlock the col, the screen only shifts when i tabbed to the end of screen (company name column)
Help please, Thanks!
-susan
When grid has no locking column, the scroll bar moves only when tabbing to the end of screen. This is what we expected.
With locked columns, the scroll bar kept moving while cursor is still in the center of the screen.
We had grid with many columns, the screen starts shifting while user only tabs on the first a few columns. It hides many columns that user needs to see.
I can reproduce the issue from your example code:
click on 1st column(Company name), press TAB multiple times, the screen starts shift when it reaches "Last Update" column.
Unlock the col, the screen only shifts when i tabbed to the end of screen (company name column)
Help please, Thanks!
-susan
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Locking Column Cell Editing - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Locking Column Cell Editing Example</h1>
<p>This example shows how to edit a locking Panel using cell editing.</p>
<p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Width="800"
Height="350">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column
runat="server"
Text="Company<br>Name"
DataIndex="company"
Width="200"
Locked="true"
Sortable="false">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
<Renderer Fn="change" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
<Renderer Fn="pctChange" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
<Editor>
<ext:DateField runat="server" />
</Editor>
</ext:DateColumn>
<ext:Column
runat="server"
Text="Company Name"
DataIndex="company"
Width="200"
Sortable="false">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
<Renderer Fn="change" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
<Renderer Fn="pctChange" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
<Editor>
<ext:DateField runat="server" />
</Editor>
</ext:DateColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
</body>
</html>
Last edited by fabricio.murta; Aug 06, 2019 at 6:38 PM.
Reason: User request (Ext.NET version was too old)
