I want to add the following functionality to the dhtml grid(Excel map grid).

1. I want to add a button in the cell grid.

2. focus should be set to the button on moving the arrow key

3.Button click event should be fired when “enter” key is pressed.

I am able to add the button to the cell grid but focus setting is not happening properly and hence button click event is not firing.

Please provide me with the sample code if any.

Itz urgent, Please reply.

Can be done with custom excell only - please check attached sample. (72.7 KB)

I would like a solution to this too. But the zip-file is invalid. Please post a new one, thank you!

Please check attached sample

repacked.ZIP (72.3 KB)

May be it’s a stupid question but in the example you attached how could I get the button values?. Do I need to override the GetValue function?.


The excell in sample returns empty string from getValue, it can be redefined as

function eXcell_button(cell){
   this.base = eXcell_ed;
   this.getValue = function(){ return this.cell.firstChild.innerHTML;    }

so you will be able to use
to access label of button.

Thank you for the sample. However it doesn’t behave in IE7 as I (and I think ARUN too) would like.
When moving into a cell with a button with the Tab key, the button text turns red, but pressing Enter key after that does not fire the onclick event.
However the button seems to get “proper” focus.
Pressing the Enter key twice in a row fires the onclick event. 

From the point when any button has “proper” focus, all rows work fine when navigating with the tab key, and the buttons responds correctly on the first Enter key.
But, click outside the grid, then on the first row again, hit tab to give the button focus (text turns red), Enter key again does not trigger the onclick event.
Maybe this is just some inconcistency in the sample? Or is there a problem in your approach?

I have only tested in IE7.

It would be nice with a sample where navigating with arrow keys, tab key, shift-tab and Enter would all work.

Thank you!

The sample attached as answer for original question shows just an example how it can be done.
If you want to have slick keyboard-navigation, with autofocusing buttons in grid - slightly different approach can be used.

Please check attached sample, it still uses custom excell to render buttons in grid, but use grid events to autofocus buttons and excel_keymap to allow keyboard navigation

913741974.ZIP (1.68 KB)