Griddle Subgrids Collapse on Render

Question

Griddle supports subgrids . I have a custom component (used to select a row) in one of the fields that changes state. This change in state causes a re-visualization that destroys the subcrisis. However, I would like it to remain open.

The same problem is described in this Github issue , including this example (thanks to @denzelby Github), in which filtering collapses subgrids.

Pay attention to the code from the script how the state of onCountClick updated (pressing the "inc" button), causing a repeated visualization:

 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 status update triggers a re-render, which causes everything to collapse. How can I save everything I need for re-rendering? Perhaps I could keep track of which ones are expanded, but then I need a programmatic way to expand rows that I did not find with Griddle.

Answer 1

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

Two possible reasons:

• componentWillReceiveProps() is called whenever the props change - and there are many props that are not related to the "showing children", so any change to the scroll may introduce an undesirable side effect that you are describing!

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

• Less likely: if the Griddle creates completely new components every time the filter is changed (I didn’t check!), Then getInitialState() will change all rows. Subsequently, significant processing of the parent components will be required to save showChildren.

• I thought about saving showChildren in the data itself and passed the setShowChildren container handler function through the gridRowContainer.jsx component (as you could with redux), but it will be messy.

Answer 2

I know this is the year, but if someone is still looking for an answer, here's how I implemented it.

• In griddle.jsx.js , when creating a GridTable , add this prop to this list on line 836

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

• In gridTable.jsx.js add "resultsFromFilter": false to the default resultFromFilter prop when creating the GridRowContainer on line 180.

  resultsFromFilter: that.props.resultsFromFilter

• In gridRowContainer.jsx.js add resultsFromFilter: false to the default list of details and add this function to the component.

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

This ensures that whenever the subgrid mesh matches the result, a failure occurs.