PDA

View Full Version : [CLOSED] Cell Editor navigation in a Grid



tnwheeler
Sep 17, 2013, 10:57 PM
Using the ideas presented in this post (http://forums.ext.net/showthread.php?21924) I created a grid with locking columns and a highlighted selected row that would allow the user to move between the editor between cells using up, down, enter, tab, shift+enter, and shift+tab. basically making my grid act like a Excel spreadsheet.



<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<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" }
};


this.GridPanel1.Store.Primary.DataBind();
}
}
</script>


<!DOCTYPE html>


<html>
<head id="Head1" 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 + "%");
};


var TriggerField_SpecialKey = function (sender, e, eOpts) {
var grid = App.GridPanel1;
if (e.getKey() === e.TAB) {
grid.tabWasPressed = true;
e.keyCode = e.ENTER;
}
if (e.shiftKey) {
grid.shiftWasPressed = true;
};
if (e.getKey() === e.UP) {
grid.shiftWasPressed = true;
grid.enterWasPressed = true;
e.keyCode = e.ENTER;
}
if (e.getKey() === e.DOWN) {
grid.enterWasPressed = true;
e.keyCode = e.ENTER;
}
if (e.getKey() === e.ENTER) {
grid.enterWasPressed = true;
}
}


var editCourseGradebook_Edit = function (sender, context, eOpts) {
var grid = App.GridPanel1;
if (grid.enterWasPressed) {
var index = grid.shiftWasPressed ? -1 : 1;


sender.startEdit(context.rowIdx + index, context.column);
}
if (grid.tabWasPressed) {
var index = grid.shiftWasPressed ? -1 : 1;


sender.startEdit(context.rowIdx, context.colIdx + index);
}
grid.tabWasPressed = false;
grid.enterWasPressed = false;
grid.shiftWasPressed = false;
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" 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 ID="Column1" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>


<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<EditorOptions IgnoreNoChange="true" />
<Editor>
<ext:TriggerField ID="NumberField1" runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="TriggerField_SpecialKey"></SpecialKey>
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change" Width="97">
<Renderer Fn="change" />
<EditorOptions IgnoreNoChange="true" />
<Editor>
<ext:TriggerField ID="NumberField2" runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="TriggerField_SpecialKey"></SpecialKey>
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column ID="Column4" runat="server" Text="% Change" DataIndex="pctChange" Width="97">
<Renderer Fn="pctChange" />
<EditorOptions IgnoreNoChange="true" />
<Editor >
<ext:TriggerField ID="NumberField3" runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="TriggerField_SpecialKey"></SpecialKey>
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="CellSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" >
<Listeners>
<Edit Fn="editCourseGradebook_Edit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>


My solution worked great (version 2.2 release), until I updated to the latest build from the SVN.

As soon as I did that the newly focused cell stopped going into "edit" mode until I hit the enter key a second time.

To make matters worse, adding the following property (which was the reason I was updating to the latest build) causes my navigation code to fail completely -- unless the user changes the value of the cell/field.



<EditorOptions IgnoreNoChange="true" />


What do I need to do to make it work? I really need the ability to move the editor within the grid and keep the current row highlighted (my updates are being done via a DirectMethod called from the GridPanel's Edit listener -- not shown).

Since the IgnoreNoChange property was the main reason to update to the latest build, I am going to pull it and roll back to the 2.2 version for now but with 2.3 around the corner I really need to know how to deal with the upcoming changes.

Thanks in advance for your help and insight.

Regards,

Daniil
Sep 18, 2013, 8:34 AM
Hi @tnwheeler,

I think this is a very tricky thing:

e.keyCode = e.ENTER;

I recommend you not to do that and use a CellEditing's plugin to complete editing. Here is an example working with v2.2 release.

Example 2.2

<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<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>Ext.NET v2 Example</title>

<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 + "%");
};

var onSpecialKey = function (sender, e, eOpts) {
var grid = App.GridPanel1,
completeEdit = false;

if (e.getKey() === e.TAB) {
grid.tabWasPressed = true;
completeEdit = true;
}

if (e.shiftKey) {
grid.shiftWasPressed = true;
};

if (e.getKey() === e.UP) {
grid.shiftWasPressed = true;
grid.enterWasPressed = true;
completeEdit = true;
}

if (e.getKey() === e.DOWN) {
grid.enterWasPressed = true;
completeEdit = true;
}

if (e.getKey() === e.ENTER) {
grid.enterWasPressed = true;
}

if (completeEdit) {
grid.normalGrid.editingPlugin.completeEdit();
e.stopEvent();
}
};

var onEdit = function (sender, context, eOpts) {
var grid = App.GridPanel1,
index;

console.log(context);

if (grid.enterWasPressed) {
index = grid.shiftWasPressed ? -1 : 1;
sender.startEdit(context.rowIdx + index, context.column);
}

if (grid.tabWasPressed) {
index = grid.shiftWasPressed ? -1 : 1;
sender.startEdit(context.rowIdx, context.colIdx + index);
}

grid.tabWasPressed = false;
grid.enterWasPressed = false;
grid.shiftWasPressed = false;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Width="600"
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:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column
runat="server"
Text="Change"
DataIndex="change"
Width="97">
<Renderer Fn="change" />
<Editor>
<ext:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column
runat="server"
Text="% Change"
DataIndex="pctChange"
Width="97">
<Renderer Fn="pctChange" />
<Editor >
<ext:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<Edit Fn="onEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

For some reason it doesn't start editing with the trunk (v2.3). I am investigating. I got it. There are a few things.

The first one. Needs to add Delay="1" to get moving editor on Enter working.

The second one. This bug:
https://github.com/extnet/Ext.NET/issues/131

As a workaround, I added some CustomConfig for the RowSelectionModel.

So, this example appears to be working with the trunk (v2.3).

Example

<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<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>Ext.NET v2 Example</title>

<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 + "%");
};

var onSpecialKey = function (sender, e, eOpts) {
var grid = App.GridPanel1,
completeEdit = false;

if (e.getKey() === e.TAB) {
grid.tabWasPressed = true;
completeEdit = true;
}

if (e.shiftKey) {
grid.shiftWasPressed = true;
};

if (e.getKey() === e.UP) {
grid.shiftWasPressed = true;
grid.enterWasPressed = true;
completeEdit = true;
}

if (e.getKey() === e.DOWN) {
grid.enterWasPressed = true;
completeEdit = true;
}

if (e.getKey() === e.ENTER) {
grid.enterWasPressed = true;
}

if (completeEdit) {
grid.normalGrid.editingPlugin.completeEdit();
e.stopEvent();
}
};

var onEdit = function (sender, context, eOpts) {
var grid = App.GridPanel1,
index;

if (grid.enterWasPressed) {
index = grid.shiftWasPressed ? -1 : 1;
sender.startEdit(context.rowIdx + index, context.column);
}

if (grid.tabWasPressed) {
index = grid.shiftWasPressed ? -1 : 1;
sender.startEdit(context.rowIdx, context.colIdx + index);
}

grid.tabWasPressed = false;
grid.enterWasPressed = false;
grid.shiftWasPressed = false;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Width="600"
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:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column
runat="server"
Text="Change"
DataIndex="change"
Width="97">
<Renderer Fn="change" />
<Editor>
<ext:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>


<ext:Column
runat="server"
Text="% Change"
DataIndex="pctChange"
Width="97">
<Renderer Fn="pctChange" />
<Editor >
<ext:TriggerField runat="server" EnableKeyEvents="true" SelectOnFocus="true" >
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
<CustomConfig>
<ext:ConfigItem Name="onEditorTab" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:RowSelectionModel>
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<Edit Fn="onEdit" Delay="1" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

As for the IgnoreNoChange setting.

According to the ExtJS docs.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Editor-cfg-ignoreNoChange

It doesn't fire the editing events if there are no changes in the editted cell. So, I think it is the reason. So, the Edit even just doesn't fire.

Please clarify why do you need this setting? Also please clarify why do you need to update from v2.2 to use this setting? It looks to be available in v2.2.

tnwheeler
Sep 18, 2013, 9:25 PM
Daniil,


I think this is a very tricky thing:

e.keyCode = e.ENTER;

I recommend you not to do that and use a CellEditing's plugin to complete editing. Here is an example working with v2.2 release.

That makes sense. I will try that (Edit: it works, Thanks)



For some reason it doesn't start editing with the trunk (v2.3). I am investigating. I got it. There are a few things.

The first one. Needs to add Delay="1" to get moving editor on Enter working.

The second one. This bug:
https://github.com/extnet/Ext.NET/issues/131

As a workaround, I added some CustomConfig for the RowSelectionModel.

So, this example appears to be working with the trunk (v2.3).


Your example worked great and I was able to get my page working in 2.2. and the svn build.



As for the IgnoreNoChange setting.

According to the ExtJS docs.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Editor-cfg-ignoreNoChange

It doesn't fire the editing events if there are no changes in the edited cell. So, I think it is the reason. So, the Edit even just doesn't fire.

Please clarify why do you need this setting? Also please clarify why do you need to update from v2.2 to use this setting? It looks to be available in v2.2.
The average user of this page will be displaying a grid with 25 rows and 30+ columns. As they are walking through the grid I don't want to update the data (via a direct method) if they have not change anything. I also want to enable the option "CancelOnEscape" but there is a bug in the v.2.2 release that causes invalid javascript code to be generated when I attempt to use the EditorOptions property on a dynamically added column in a grid panel (http://forums.ext.net/showthread.php?26172-CLOSED-EditorOptions-property-on-a-dynamic-column-generates-invalid-code-Bug).

This is a rather complex application that use a dynamically generated grid in the interest of simplicity I did not attempt include that code in my example.

Daniil
Sep 19, 2013, 6:05 AM
The average user of this page will be displaying a grid with 25 rows and 30+ columns. As they are walking through the grid I don't want to update the data (via a direct method) if they have not change anything.

So, if you need the Edit event for the navigation functionality, you have to refuse from the IgnoreNoChange option. I would add that the IgnoreNoChange does make sense with string values only, for other data types it is not being taken into account.

Do you call a DirectMethod with an Edit listener? There should be a way to determine the "no change" case and do not call a DirectMethod. You can compare e.originalValue and e.value.

tnwheeler
Sep 19, 2013, 4:20 PM
So, if you need the Edit event for the navigation functionality, you have to refuse from the IgnoreNoChange option. I would add that the IgnoreNoChange does make sense with string values only, for other data types it is not being taken into account.

Do you call a DirectMethod with an Edit listener? There should be a way to determine the "no change" case and do not call a DirectMethod. You can compare e.originalValue and e.value.

My data is exclusively string types -- they are grades that can be entered as integers, letters, reals or left blank.

I am already working around the previously mentioned bug in the released build of v2.2 by not calling the DirectMethod if the value has not changed.

Daniil
Sep 20, 2013, 4:05 AM
I am already working around the previously mentioned bug in the released build of v2.2

Please clarify what exactly are you considering a bug? The fact that IgnoreNoChange breaks your custom navigation functionality?

tnwheeler
Sep 20, 2013, 3:34 PM
Please clarify what exactly are you considering a bug? The fact that IgnoreNoChange breaks your custom navigation functionality?
No. The bug I am referring to is covered in the attached thread (http://forums.ext.net/showthread.php?26172-CLOSED-EditorOptions-property-on-a-dynamic-column-generates-invalid-code-Bug) and is where adding an EditorOptions section to an dynamically generated column renders invalid javascript to the client in v2.2.

Daniil
Sep 23, 2013, 4:00 AM
Ok, thank you for clarifying.

As a conclusion. I don't think that you can use the IgnoreNoChange option while you use the Edit event for navigation.

tnwheeler
Sep 24, 2013, 1:05 PM
Ok, thank you for clarifying.

As a conclusion. I don't think that you cannot use the IgnoreNoChange option while you use the Edit event for navigation.

Ok that makes sense. Thank-you.

Daniil
Sep 24, 2013, 4:08 PM
So, do you mind we close the thread?

tnwheeler
Sep 24, 2013, 4:45 PM
So, do you mind we close the thread?

At this point no. I will repost if I have further issues, but you have addressed my initial problem.