Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by ARUN on Jan 31, 2008 04:37
open dhtmlx forum
INSERTING BUTTON IN CELL GRID

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.

Answer posted by Support on Jan 31, 2008 06:26
Can be done with custom excell only - please check attached sample.
Attachments (1)
1201790115.zip74.40 Kb
Answer posted by Hans on May 01, 2008 18:48
I would like a solution to this too. But the zip-file is invalid. Please post a new one, thank you!
Answer posted by Support on May 02, 2008 04:59
Please check attached sample
Attachments (1)
repacked.ZIP74.00 Kb
Answer posted by neoevoman on May 06, 2008 10:44
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?.

Regards
Answer posted by Support on May 08, 2008 03:53
The excell in sample returns empty string from getValue, it can be redefined as

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

so you will be able to use
    grid.cells(i,j).getValue()
to access label of button.
Answer posted by Hans on May 18, 2008 13:42

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!

Answer posted by Support on May 19, 2008 07:28

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

Attachments (1)
913741974.ZIP1.73 Kb