create button per row

Is there a way to create one button per row? If so then how is the event for it trapped and coded? Can there be two buttons per row and keep them distinct? Finally can there be other GUI controls similarly treated? Thank you.

There are few possible strategies, for example

  • you can place html code of buttons directly in the cell’s data. As cell allows any html inside of them, it can render buttons as well. In such case grid will not handle button actions, but you can inline onclick handlers in the html
  • you can create a separate column for buttons, use the button’s html value as a cell value, and handle onRowSelected event. It will fire after clicking on the cell ( on the button ) and will provide both row id and column index. From second, you can detect is it a button column, or just a click somewhere in the grid.

Hi Stanislav
Thanks, the second is more reminiscent of an example I saw but it had to be added to the “onRowCreate”. I am dynamically adding rows and I need the button to be on every newly created row, it needs to be an “equal member” of all the other grid ornaments and events. Can you indicate how it needs to be coded from creation of the grid?

[code]grid.attachEvent(“onRowCreated”, function(id){
grid.cells(id, 8).setValue("");
return true;
grid.attachEvent(“onRowSelect”, function(id, index){
if (index == 8)
alert("Button clicked in row "+id);

return true;

In above code 8 - index of column, in which button will be shown.

Excellent thank you.

Hi Stanislav
However, is there a particular colType as the code below does not render the button and just the html text

return true;

There is no “button” type, so you can use “ro” type and above code. Or, it possible to create a custom “button” type, which will require more coding ( with the same result in the end )

Hi Stanislav
However when a new row is added the button “does not stay” on the previous rows. Is that to be expected?

Hi Stanislav
Works now, it appears I was writing to that cell and now the button “sticks”. Thank you for tolerating my clutter.

Hi Stanislav
Thank you, however I now need to use this technique and with the simple configuration it is not firing a “onRowSelect” event on either the button click or a cell click. Maybe it is too late but I cant see anything wrong. I welcome your correction.

      mygrid = new dhtmlXGridObject("gridbox");
      mygrid.setImagePath('<html:rewrite page="/pages/js/dhtmlx/codebase_v3/dhtmlxGrid/codebase/imgs/"/>');
      mygrid.setIconsPath('<html:rewrite page="/pages/js/dhtmlx/codebase_v3/dhtmlxGrid/codebase/imgs/"/>');
      mygrid.setNumberFormat('0,000',1, '.', ' ');
      mygrid.setNumberFormat('0,000',2, '.', ' ');
        mygrid.cells(id,3).setValue("<input type='button' value='Post'>");
        return true;
      mygrid.attachEvent("onRowSelect", function(id, index){
        log.debug('onRowSelect: entered.');

Unfortunately the issue cannot be reproduced locally.
The onRowSelect event occurs well for us.