PDA

View Full Version : [CLOSED] GridPanel.start cell editing when key pressed



supera
Feb 27, 2012, 8:58 PM
Hi!

I have a gridpanel and in this gridpanel, i have a columns with a 'editor' tag, as follow:



<ext:Column runat="server" ID="QUANTIDADEDIARIA" DataIndex="QUANTIDADEDIARIA" Text = "Qtd Diária" Width="60">
<Renderer fn="renderQuantidadeDiaria" />
<Editor>
<ext:NumberField ID="txtQuantidadeDiaria" runat="server" DecimalSeparator="," DecimalPrecision="2" SelectOnFocus="true"/>
</Editor>
</ext:Column>


When i click in cell and press a key ENTER, the edit action of cell is triggered. Itīs right.
I wish the same behavior when i press any numeric key in this cell.
Itīs possible?
Thanks for any help!

Daniil
Feb 28, 2012, 1:16 PM
Hi,

Here you are.

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)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
store.DataBind();
}
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onKeyDown = function (e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record;

if (e.getKey() === e.ONE ||
e.getKey() === e.TWO ||
e.getKey() === e.THREE) { //etc.

pos = selModel.getCurrentPosition();
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
me.startEdit(record, columnHeader);
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test2" DataIndex="test2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test3" DataIndex="test3">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Listeners>
<AfterRender Handler="this.getView().el.on('keydown', onKeyDown, #{CellEditing1});" />
</Listeners>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

supera
Feb 28, 2012, 4:58 PM
Thanks Daniil!

This is almost what I want.

Now, when I press any numeric key, the cell editing is triggered... but the number pressed donīt set to the editor... i.e., the column editor contains the old value.

Only when I press any key within the editor, is that the value is overwritten by the key pressed.

Daniil
Feb 28, 2012, 6:40 PM
Please use:

var onKeyDown = function (e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record,
char = String.fromCharCode(e.getKey());

if (new RegExp("[0-9]").test(char)) {
pos = selModel.getCurrentPosition();
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
record.data[columnHeader.dataIndex] = char;
me.startEdit(record, columnHeader);
}
};

supera
Feb 29, 2012, 2:54 PM
Hi Daniil

Thanks for your help!

I had to use the Keypress event instead of KeyDown event, because the KeyDown event donīt consider the NumericPad keys as numeric keys.

Now, I has another problem... when the Editor of column is triggered, then Editor has numeric character of key pressed, but the cursor is positioned in START of field. I.e., if i press the '5' key, the Editor is triggered with value 5 (five). When i press another numeric key (6, for example), the content of Editor is 65 instead of 56, that was is my intention.

Start a new thread?

Thanks a lot for your help!

Daniil
Feb 29, 2012, 3:50 PM
No, I don't think a separate thread is required, your question is tightly related to the initial problem.

Please try:

var onKeyPress = function (e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record,
char = String.fromCharCode(e.getKey());

if (new RegExp("[0-9]").test(char)) {
pos = selModel.getCurrentPosition();
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
me.startEdit(record, columnHeader);
Ext.Function.defer(function () {
columnHeader.getEditor().field.setValue(char);
}, 50);
}
};

supera
Feb 29, 2012, 5:46 PM
Hi Daniil!

Does not work...

The cursor is opened in start of Editor field...

Iīm trying use the fireKey to trigger the RIGHT ARROW key in Editor field, but I get a error: Run time error: object donīt support property or method 'isSpecialKey'

3871



var onKeyPress = function (e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record,
char = String.fromCharCode(e.getKey());

if (new RegExp("[0-9]").test(char)) {
pos = selModel.getCurrentPosition();
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
me.startEdit(record, columnHeader);
record[columnHeader.dataIndex] = char;
Ext.Function.defer(function () {
columnHeader.getEditor().field.fireKey(e.RIGHT);
},50);
}
};

Daniil
Feb 29, 2012, 8:07 PM
Please try to increase the delay 50 to 100 in my code.


Ext.Function.defer(function () {
columnHeader.getEditor().field.setValue(char);
}, 50);

supera
Mar 01, 2012, 11:54 AM
Hi Daniil

I am trying increase the delay to 100, to 150, and still donīt work!

Thanks for your help and efforts in this thread. If you has more suggestions, I appreciate.

Daniil
Mar 01, 2012, 11:57 AM
Please provide a full sample how you are trying and the browser you are testing with.

supera
Mar 01, 2012, 8:04 PM
Hi Daniil!

I trying create a example... but in example, works very fine.

The codes are equals...

Well... I will keep trying find the problem... Thanks a lot for your help