Griddle Subgrids Collapse on Render

Question

Griddle supports subgrids. I have a custom component (used for row selection) in one of the fields that changes the state. This state change causes a re-render, which collapses the subgrid. However, I'd like it to stay open.

This same problem is documented in this Github issue, including this example (thanks @denzelby of Github) in which filtering collapses the subgrids.

Note in the code from the fiddle how the state is updated onCountClick (clicking the "inc" button), causing the re-render:

var GridAndCounter = React.createClass({

  render: function() {
  var columnNames = ['id', 'age', 'name', 'company', 'state', 'country', 'favoriteNumber'];
  var rowMetadata = {key: "id"};
    return <div><Counter count={this.state.count} onClick={this.onCountClick} /><Griddle results={fakeData} rowMetadata={rowMetadata} columnNames={columnNames} resultsPerPage={100} showFilter={true} /></div>
  },
  onCountClick: function() {
      React.addons.Perf.start();
      this.setState({count: this.state.count + 1 });
      setTimeout(function() {
          React.addons.Perf.stop();
          React.addons.Perf.printDOM();
      }, 500);
  },
  getInitialState: function() { 
      return { count: 0 }; 
  }
})

This state update causes a re-render which sets everything to collapsed. How can I keep everything expanded on re-render? I could perhaps track which ones are expanded myself, but then I would need a programmatic way to expand the rows, which I haven't discovered with Griddle.

Answer 1

Looking at the github source of Griddle, gridRowContainer.jsx uses state to determine whether the row is collapsed or not, and forces showChildren to false in its getInitialState() and componentWillReceiveProps().

Two possible causes:

1. componentWillReceiveProps() is called whenever props change - and there are lots of props unrelated to 'showing children', so any prop change could introduce the unwanted side-effect you describe!

   Suggestion: Try removing the setting of showChildren in componentWillReceiveProps() of gridRowContainer.jsx

2. Less likely: If Griddle is creating entirely new components with each change of the filter (I haven't checked!), then getInitialState() would cause all rows to collapse. It would then need a considerable rewrite of the parent components to preserve showChildren.

3. I thought about storing showChildren in the data itself, and passing your container's handler function setShowChildren through to the gridRowContainer.jsx component (as you might do with redux), but that would get messy.

Answer 2

I know this is an year old but if some one is still looking for answer, this is how I implemented it.

1. In griddle.jsx.js, while creating GridTable, add this prop to that list on line 836

   resultsFromFilter: !this.isNullOrUndefined(this.state.filteredResults)

2. In gridTable.jsx.js, add "resultsFromFilter": false to default pass down resultFromFilter prop while creating GridRowContainer on line 180.

   resultsFromFilter: that.props.resultsFromFilter

3. In gridRowContainer.jsx.js, add resultsFromFilter: false to list of default props and add this function to component.

   componentDidMount(){this.setState({showChildren:this.props.resultsFromFilter})}.
   

This will ensure that when ever the sub grid matches the result comes out as collapsed.