Title: Nested DataGrid not updating when data changes
Post by: chrwei on July 17, 2020, 07:12:33 AM
the nested grid only redraws when you close and open the expander. is it because I'm using a reducer? or something else? import React, { useReducer } from 'react'; import './App.css'; import { DataGrid, GridColumn, LinkButton } from 'rc-easyui';
function App() { const [data, setData] = useReducer(dataReducer, null, () => ( [ { a1:"a", a2:"A", c:[{ b1:"x", b2:"X" }] }, { a1:"b", a2:"B", c:[] }, { a1:"c", a2:"C", c:[] }, ]));
return ( <div className="App"> <DataGrid data={data} renderDetail={({row}) => { return ( <div style={{ marginLeft: 30 }}> <DataGrid data={row.c} > <GridColumn field="b1" title="Col1" width={110} /> <GridColumn field="b2" title="Col2" width={110} /> </DataGrid> </div> ); }} > <GridColumn key="e" field="e" expander width={30}></GridColumn> <GridColumn field="a1" title="Col1" width={110} /> <GridColumn field="a2" title="Col2" width={110} /> </DataGrid> <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to a-A</LinkButton> <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to a-A</LinkButton> <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to b-B</LinkButton> <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to b-B</LinkButton> </div> ); }
const dataReducer = (data, item) => { let newData = [ ...[], ...data]; newData.find(s=>s.a1===item.a1).c.push(item.c);
return newData; }
export default App;
Title: Re: Nested DataGrid not updating when data changes
Post by: chrwei on July 17, 2020, 08:05:03 AM
adding this column to the top grid also does not update when new items are added <GridColumn field="x" render={({row})=>"Entries " + row.c.length} />
Title: Re: Nested DataGrid not updating when data changes
Post by: jarry on July 17, 2020, 08:49:34 PM
Please use this code instead. const dataReducer = (data, item) => { let newData = [...[], ...data]; const row = newData.find(s => s.a1 === item.a1); row.c = [...row.c, item.c]; return newData; }
Title: Re: Nested DataGrid not updating when data changes
Post by: chrwei on July 20, 2020, 07:24:30 AM
ah, needed to replace the array, not modify in place, but needed row.c = [...row.c, ...[item.c]]; because it's a string value
the .length field still doesn't update though. I also tried replacing the "x" with "c"
|