gridType: 'tree' - inserting additional rows - not part of tree

[GordonJones]

I am planning to use react-redux-grid in tree mode and am experimenting to make sure is supports the things I will need. One feature is the ability to add new rows into the tree. I am a little confused about whether I should use the INSERT_ROW grid action or ADD_NEW_ROW. When I use INSERT_ROW I have 2 problems. The first is that the newly inserted row displays, but is not plugged into the parent/child structure, even if I supply a parentId in the data object. Drag and drop of the newly inserted row goes haywire with hundreds of errors: TypeError: undefined is not an object (evaluating 'getTreeData().path.toJS')

I also get this exception on insertion: Warning: Each child in an array or iterator should have a unique "key" prop.

My feeling is that in tree mode the 'parentId' is more relevant than the 'index' field?

Below is my app.js.

import React, { Component } from 'react'; import { Grid, Store, Actions } from 'react-redux-grid'

import { treeConfig } from './components/treeprops'; import './App.css';

class App extends Component { render() {

const gridConfig = {
  ...treeConfig,
  store: Store
}
  return (
    <Grid { ...gridConfig } />
);

}

componentDidMount() { console.log ('inserting row'); Store.dispatch( Actions.GridActions.insertRow({ stateKey: 'oneAndOnlyTree', data: { id:27, parentId:1, Name:"Fred", Email:"gordon@gmail.com", Gender:"Male", Address:"27 Sixth Lane", Phone:"+44 20 8996 9966"}, index: 4 }) ); } }

export default App;

[GordonJones]

So - instead of using insertRow, I used setTreeData with partial set to true and a valid parentId. This is almost there. The parent believes it now has a child, but the new child is not displayed.

I'll keep digging.

[bencripps]

What do you mean the new child is not displaying?

[GordonJones]

What I see on screen after the setTreeData partial action is that the parent under which I inserted the new row gains an expand/collapse disclosure icon - so it no longer is a leaf, but when I click on the disclosure icon it moves slightly right and left, but the child row is not displayed at all.

Below is my insert function

  insertARow () {
    console.log ('inserting row');
    Store.dispatch(
        Actions.GridActions.setTreeData({
            stateKey: 'oneAndOnlyTree',
            data: {
              id:27,
              Name:"Fred",
              Email:"gordon@gmail.com",
              Gender:"Male",
              Address:"27 Sixth Lane",
              Phone:"+44 20 8996 9966",
              leaf:true},
            parentId: 21,
            showTreeRootNode: false,
            partial: true,
            editMode:false
        })
    );
  }

[GordonJones]

So I thought I would use this as an excercise to learn how to use git and PR. So I forked the master branch, built it locally and ran my trivial app against it. But I am getting a lot more errors. eg:

Exception with thrown value: TypeError: null is not an object (evaluating 'headerDOM.parentNode')

in FixedHeader.js at line 204, called from componentDidMount.

I am guessing I should not have forked the master branch?

Can you tell me which branch I should have used? Is there a convention for choosing a safe one?

[GordonJones]

I have investigated further the problem with trying to insert a new tree node. I am 90% certain it is arising in treeToFlatList. The newly inserted node seems to have been linked into the tree structure OK, but when the flattened list is generated, it is left out. I am guessing there is something missing in the newly inserted node that is throwing treeToFlatList off course, but I can't work out what. I will keep digging, but if you have any suggestions....

[GordonJones]

After spending some time doing grandad duties, I came back to this and the solution jumped out and hit me. setTreeData takes a single node when partial is false (the root), but it expects a row when partial is true (the new children of the parent). I passed a row and it displays fine.

I'll close this issue, but I plan to raise an issue/pr to cause the partial update to add into the parent's children, not replace them, when I've worked out how to do that.