[CLOSED] GridPanel.start cell editing when key pressed

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel.start cell editing when key pressed

    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!
    Last edited by Daniil; Mar 07, 2012 at 9:23 PM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    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.
  4. #4
    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); 
        }  
    };
  5. #5
    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!
  6. #6
    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);
        } 
    };
  7. #7
    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'

    Attachment 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);
            }
        };
  8. #8
    Please try to increase the delay 50 to 100 in my code.

    Ext.Function.defer(function () {
        columnHeader.getEditor().field.setValue(char);
    }, 50);
  9. #9
    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.
  10. #10
    Please provide a full sample how you are trying and the browser you are testing with.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Jul 10, 2012, 6:35 PM
  2. [CLOSED] Editing cell of gridPanel
    By supera in forum 2.x Premium Help
    Replies: 7
    Last Post: May 23, 2012, 1:47 PM
  3. Replies: 0
    Last Post: Apr 14, 2011, 8:10 AM
  4. [CLOSED] ColumnTree cell editing
    By kenanhancer in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 8:38 AM
  5. Replies: 1
    Last Post: Feb 25, 2010, 12:17 PM

Posting Permissions