React-data-grid: How to re-render grid rows

[anil1712]

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 ARE YOU USING?

Officially Supported:
[x ] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[ x] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
Not replacing the row values

Expected/desired behavior
Should update the grid data row

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.
Create a reload button and on click event try to update the datasets with some new values

What is the expected behavior?
Getting some exception in console
TypeError: Cannot read property 'id' of undefined at Object.isRowSelected
and this also
Uncaught TypeError: Cannot read property '__metaData' of undefined at Object.renderRow (eval at ./node_modules/react-data-grid/dist/react-data-grid.js

What is the motivation / use case for changing the behavior?
To able to update the Grid row data

@malonecj Can you please help me to out of this issue.
Thanks

[Sreenivaspiitr]

Even i am facing the same problem..
Error: Uncaught TypeError: Cannot read property 'update' of undefined..

[GenoD]

Can you please share some code so we may know more context to the situation?

[ladyisatis]

Getting the same error, "Cannot read property of '__metaData' of undefined". I can't easily cobble together an example but if a row is added, there is DOM manipulation, React-data-grid will assume everything's there. For some reason, when React re-renders without the row in the array using rowGetter, it'll assume the row is there when the row is actually not and removed from the array.

[pizzadev]

Getting the same error. The problem is with rendering row on expanding/collapsing grouped rows. Collapsing/expanding example still not working.

[nadim]

I am experiencing the same error as well and I believe this is all related. Here is some more context.

I am trying to implement Sorting and Filtering exactly like the examples. The behaviour I get for sorting is that when I click on the header, the sort indicator appears, and the grid actually sorts but doesn't re-render. I am using setState, again, exactly like the examples. As soon as I scroll the grid re-renders correctly (sorted). There is no error in this case. This happens regardless of if I include the filter code or not.

For filtering I get the following error:

react-data-grid.js:9334 Uncaught TypeError: Cannot read property '__metaData' of undefined
    at Object.renderRow (http://localhost:3000/app.js:150781:14)
    at http://localhost:3000/app.js:150829:23
    at Array.map (native)
    at Object.render (http://localhost:3000/app.js:150828:57)
    at http://localhost:3000/app.js:11811:22
    at measureLifeCyclePerf (http://localhost:3000/app.js:11090:13)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/app.js:11810:26)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/app.js:11837:33)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/app.js:11761:37)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3000/app.js:11739:11)

The behaviour is as follows:

1. I enter some filter criteria
2. the grid doesn't update
3. I scroll
4. Above error is displayed.
5. When I get to the bottom of the grid, in the place where the bottom rows normally appear, there is a white background (see attached screenshot).
   
   I know this is still part of the component because the scrollbar extends to here.

Debugging a little... when the code reaches here:

renderRow: function renderRow(props) {
        var row = props.row;
        if (row.__metaData && row.__metaData.getRowRenderer) {

props.row is undefined, and props is as follows:

Object {key: "row-16", idx: 16, visibleStart: 1, visibleEnd: 13, ref: function…}cellMetaData: ObjectcolDisplayEnd: 13colDisplayStart: 0colVisibleEnd: 8colVisibleStart: 0columns: Array(19)expandedRows: Array(0)height: 35idx: 16isScrolling: trueisSelected: falsekey: "row-16"onMouseOver: undefinedref: function ref(node)row: undefinedsubRowDetails: ObjectvisibleEnd: 13visibleStart: 1__proto__: Object

Any suggestions on how I can help to fix this? Thank you!

[TommiHo]

I'm having exactly the same issue at the moment.

[TommiHo]

I fixed it! Make sure you pass "rowsCount={this.rowsCount()}" to ReactDataGrid component. It is needed because filter changes the amount of visible rows. @nadim

[ashu17706]

@TommiHo Thanks Man. It saved my lots of time. :)

[bonimba]

It seems the issue has been resolved:
Make sure you pass "rowsCount={this.rowsCount()}" to ReactDataGrid component.

so it can be closed.