Arrow key navigation in edit Grid

[ust]

Hi,

We have a requirement on cell navigation which should support navigation in the grid using arrow keys (while in edit mode). This requirement can be broken down into:

1) Edit values in cell without pressing Enter key or click
2) Press arrow keys to navigate in the grid while in edit mode .

I am referring to the example of edit-grid (http://www.extjs.com/deploy/dev/exam...edit-grid.html) which does not provide these functionalities. Is there any other example which supports this? If not, would we be able to achieve this in some way?

I am a beginner for Ext JS and would appreciate if someone can shed some light on this.

Thanks in advance.

[issameddine]

Hello
1. You retrieves the coordinates of the current cell (and coldex rowIndex)
2. You test the type of the button and you call the function startEditing

var     rowSelected = grid.activeEditor.row;
var     colSelected = grid.activeEditor.col;
if (rowSelected > 0)
{
	if (code == "38")
		grid.startEditing (rowSelected-1, colSelected); 
}	
if (rowSelected < maxRowIndex)
{
	if (code == "40")
	    grid.startEditing (rowSelected+1, colSelected); 
}

[shanewatson]

Hi All,
i am new member of this forum and hope to learn a lot and enjoy discussion with you.

[ust]

Hi issameddine,

Thanks for the reply. I apologize for my ignorance, but can you please clarify on the following:
- On what event would the code that you gave be fired? I tried using the keydown event of the grid, but once we get into edit mode, the keydown function does not get called (I wanted to put your code in the function, but since it doesnt get called, there is something else wrong with it). Please help.

grid.on('keydown', handleKeyDown);

function handleKeyDown(e)
{

code = e.keyCode;
alert(code);

}

Thanks.

[issameddine]

Hello
I am sorry, I forgot to mention it
add the 'specialkey' event of TextField editor

listeners		:{specialkey:specialkeyfunction}

specialkeyfunction=function(/* object */obj, /* Ext.EventObject */ e)
{
      //Le code de l'évennement.
      var     code = e.getCharCode ();
      var     rowSelected = grid.activeEditor.row;
      var     colSelected = grid.activeEditor.col;
      if (rowSelected > 0)
      {
            if (code == "38")
                  grid.startEditing (rowSelected-1, colSelected); 
      }	
      if (rowSelected < maxRowIndex)
      {
            if (code == "40")
                  grid.startEditing (rowSelected+1, colSelected); 
      }
}

[ust]

Hi,

This does not seem to work for me. Maybe there is some syntax error?

var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: true // columns are not sortable by default           
            
        },
        columns: [
            {
                id: 'common',
                header: 'Common Name',
                dataIndex: 'common',
                width: 220,
                // use shorthand alias defined above
                editor: new fm.TextField({
                    allowBlank: false,
                    listener: {specialkey: specialkeyfunction}
                })
            }, {
                header: 'Light',
                dataIndex: 'light',
                width: 130,
                editor: new fm.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    // transform the data already specified in html
                    transform: 'light',
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                })
            }, {
                header: 'Price',
                dataIndex: 'price',
                width: 70,
                align: 'right',
                renderer: 'usMoney',
                editor: new fm.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    maxValue: 100000
                })
            }, {
                header: 'Available',
                dataIndex: 'availDate',
                width: 95,
                renderer: formatDate,
                editor: new fm.DateField({
                    format: 'm/d/y',
                    minValue: '01/01/06',
                    disabledDays: [0, 6],
                    disabledDaysText: 'Plants are not available on the weekends'
                })
            },
            checkColumn // the plugin instance
        ]
    });

function specialkeyfunction(e)
{
        alert("function specialKeyfn");
}

// grid is then created using above cm

I have added listener to the textfield column. However when I press keys on the text field, it does not give me the alert message. Is there some silly mistake I am making? Please help.

Thanks.

[ust]

Hi issameddine,

I am not able to make it work. Maybe there is some sytax error?

var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: true // columns are not sortable by default           
            
        },
        columns: [
            {
                id: 'common',
                header: 'Common Name',
                dataIndex: 'common',
                width: 220,
                // use shorthand alias defined above
                editor: new fm.TextField({
                    allowBlank: false,
                    listener: {specialkey: specialkeyfunction}
                })
            }, {
                header: 'Light',
                dataIndex: 'light',
                width: 130,
                editor: new fm.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    // transform the data already specified in html
                    transform: 'light',
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                })
            }, {
                header: 'Price',
                dataIndex: 'price',
                width: 70,
                align: 'right',
                renderer: 'usMoney',
                editor: new fm.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    maxValue: 100000
                })
            }, {
                header: 'Available',
                dataIndex: 'availDate',
                width: 95,
                renderer: formatDate,
                editor: new fm.DateField({
                    format: 'm/d/y',
                    minValue: '01/01/06',
                    disabledDays: [0, 6],
                    disabledDaysText: 'Plants are not available on the weekends'
                })
            },
            checkColumn // the plugin instance
        ]
    });

function specialkeyfunction(e)
{
        alert("function called");
}

//grid is created using above cm

Can you please check? Thanks.

[issameddine]

u must replace "listener" with "listeners"

Hi issameddine,

I am not able to make it work. Maybe there is some sytax error?

var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: true // columns are not sortable by default           
            
        },
        columns: [
            {
                id: 'common',
                header: 'Common Name',
                dataIndex: 'common',
                width: 220,
                // use shorthand alias defined above
                editor: new fm.TextField({
                    allowBlank: false,
                    listener: {specialkey: specialkeyfunction} // ==> listeners
                })
            }, {
                header: 'Light',
                dataIndex: 'light',
                width: 130,
                editor: new fm.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    // transform the data already specified in html
                    transform: 'light',
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                })
            }, {
                header: 'Price',
                dataIndex: 'price',
                width: 70,
                align: 'right',
                renderer: 'usMoney',
                editor: new fm.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    maxValue: 100000
                })
            }, {
                header: 'Available',
                dataIndex: 'availDate',
                width: 95,
                renderer: formatDate,
                editor: new fm.DateField({
                    format: 'm/d/y',
                    minValue: '01/01/06',
                    disabledDays: [0, 6],
                    disabledDaysText: 'Plants are not available on the weekends'
                })
            },
            checkColumn // the plugin instance
        ]
    });

function specialkeyfunction(e)
{
        alert("function called");
}

//grid is created using above cm

Can you please check? Thanks.

[ust]

Hi issameddine,

That worked!
Thank you very much...

[bizcatalyst]

Hi issameddine,
I was able to successfully implement your function to make the up arrow work, but I'm having trouble figuring out how to get the value of maxRowIndex so the down arrow will work. Do you know how to gain access to this from within the specialkeyfunction? I'm returning a totalProperty called totalCount in my datastore object which has the value I need but I'm not sure how to access it from within the colum model where the specialkeyfunction is defined.
Thank you,
Robert