React-data-grid: Edit row without double click but on edit icon click of row, is it possible ?

[kaushal4340]

• Have you already searched for similar issues? Please help us out and double-check first!
  yes

• Also, please don't be that person who deletes this template. It's here for a reason.

• Thanks!

---

Which version of React JS are you using?

✅ Officially supported ✅

• [✅ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [ ] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [ ] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [ ] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

Please include:
- What the current behavior is
cell edited only if we double click on it
- What the desired behvaior is
want to edit whole row (assigned editable true columns) at once on one button click in same row.
- (If Bug) Steps to reproduce the issue
- (If Feature) The motivation / use case for the feature

We especially love screenshots / videos of problems, and remember
The Best Issue Is A Pull Request™

Is it possible to have a button/icon in every row and on click of that particular row will be display as edit mode ?

[diogofcunha]

Hi @kaushal4340.

I don't see why not, we have similar use cases, can you just show a screenshot of what you want to do so that we can give a better help on this?

[kaushal4340]

Similar to this image,
https://i.stack.imgur.com/caYhh.png

[martinnov92]

Hello @diogofcunha Can you please provide some example? I would like to have something similar, but dont have any idea how to do it.
Or just to enable cell edit with one click would be enough... Thank you

[diogofcunha]

Hey guys, this isn't documented well enough, we will add some good documentation over the next months.

Just give me a few minutes and I will create a jsfiddle for thjs

[martinnov92]

Thank you @diegomurakami
And have you got any idea why editor don´t close itself when I click outside the cell? Here is a gif

Thank you

[diogofcunha]

Jsfiddle of a working example of switching between editable and readonly mode https://jsfiddle.net/3su9me5j/

To add a button to a grid row, just create a formatter that renders a button, you can pass some properties down in the formatter definition as I did in that example.

To enable or disable edit mode, take notice that editable property in the columns can also be a function, it means you can apply a technique like the one I did in the example and access state to make the grid know about editable rows. (this is the code that runs when you double click a cell to figure out if it is editable or not)

@martinnov92 not on top of my head, is there any js error? If you can't share that code in here you can drop me the editor code over email if you wish and I will have a look.

[diogofcunha]

Hi @martinnov92, you can use column events to open a cell on click, the trick here is:

• Add a ref to the grid component
• Add the event to the column:

onClick: (ev, args) => {
  const { rowIdx, idx } = args;
  this._ref && this._ref.openCellEditor(rowIdx, idx);
}

On the code related question, it's better if you drop on our slack so that I can ask a few questions and we can resolve that quickly