React-data-grid: Editable Does Not Work

Created on 7 Aug 2017  ·  4Comments  ·  Source: adazzle/react-data-grid

  • 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?

15.6.1

✅ Officially supported ✅

  • [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

  • [ ] v15.5.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
  • [x] Chrome

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

  • [ ] Firefox
  • [ ] Safari

I'm submitting a ...

  • [x] 🐛 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

Cells do not become editable when double clicking on them.

- What the desired behvaior is

Cells should become editable when double clicking on them.

- (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™
Needs Examples

Most helpful comment

I had the same issue. Following the example (which has an updated URL, by the way), it leads one to believe that you only need to add editable: true on the column and then pass a handler to onGridRowsUpdated. However you must also add enableCellSelect={true} to the ReactDataGrid component. Probably should put that in the example description as well.

All 4 comments

hi @JimTheMan -- are you passing enableCellSelect={true} to <ReactDataGrid />? are you able to share any code snippets / steps to recreate?

Closing this issue due to inactivity. Also please take a look at the editable example

Hi,
I have the same issue using "react": "^15.6.2" and Chrome 65.0.3325.181 (Official Build) (64-bit). I've attached my code.
In my case, I can't even see the drag handle, it seems like it doesn't take into consideration onGridRowsUpdated, anyway, I can see the checkboxes in the first column by adding enableRowSelect={true}, even if when I click on one of them I get this error:

Uncaught TypeError: Cannot add property isSelected, object is not extensible
    at Object.handleRowSelect [as onCellChange] (react-data-grid.js:11987)
    at CheckboxEditor._this.handleChange (react-data-grid.js:7064)
    at HTMLUnknownElement.boundFunc (ReactErrorUtils.js:63)
    at Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:83)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:103)
    at executeDispatchesAndRelease (EventPluginHub.js:41)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:52)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:22)
    at Object.processEventQueue (EventPluginHub.js:252)
    at runEventQueueInBatch (ReactEventEmitterMixin.js:15)
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:25)
    at handleTopLevelImpl (ReactEventListener.js:70)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at dispatchEvent (ReactEventListener.js:145)

wifi.txt

Am I doing something wrong? It seems pretty equal to the examples provided.
Thanks!

I had the same issue. Following the example (which has an updated URL, by the way), it leads one to believe that you only need to add editable: true on the column and then pass a handler to onGridRowsUpdated. However you must also add enableCellSelect={true} to the ReactDataGrid component. Probably should put that in the example description as well.

Was this page helpful?
0 / 5 - 0 ratings