How to use Grid button click event in React

Suite and Optimus Suite 6
#1

In v6 apparently the only way to create a button in a grid is by using a template eg.

    { width: 100, id: "EDIT", header: [{ text: "Edit" }],
      htmlEnable: true,
      template: function (text, row, col) {
        return "<input type=\"button\" class=\"dhx_button dhx_button--color_primary dhx_button--size_medium dhx_button--view_link\"  value=\"Edit\" onclick=\"DoEdit('" + row.ID + "')\" >";
      }             
    },

This works fine in regular javascript but in React ‘DoEdit’ does not exist no matter where I put it in my component - how do I handle this?

#2

Unfortunately, currently the templates are only available solution in this case.

#3

Ok but then do you have any suggestion about how to handle a button click in the grid in React or is it simply not possible?

#4

{
id: “btn”,
header: [{ text: “Button” }],
htmlEnable: true,
template: function(text, row, col) {
return renderToString(
<button onClick={console.log(“hiii”, row)}>Click here
);
}
}

I have given like above, here onClick will work but when i press any one of the button in the column , onclick for every button gets triggered

#5

I think your problem is the missing double quotes around the click handler, but I still couldn’t log the row object eg. this works fine:

onclick=\"console.log('" + row.id + "')\"

but this doesn’t:

onclick=\"console.log(" + row + ")\"

Either way you still end up with my original problem where you can’t reference an external function, I think the problem is that I don’t know how to make my click handler available in the ReactDOM

#6

For now you can use the eventHandlers property for your grid to add the event handlers for your cell templates: