Hi team,
we are using a tree grouping grid. In which we are trying to assign different renderers for every header in the same column. For example, suppose we grouped the grid by two columns col1 and col2
grouped Column definition:
{
field:'xyz',
renderer:'groupRenderer',
items:[
{
field:'col1'
renderer:'renderer1'
},
{
field:'col2'
renderer:'renderer2'
}
]
}
Files:
GroupRenderer.js //based on record object keys this component maps Renderers object from renderers.js
renderers.js //This is an object which contains all the possible renderers in key-value pair
Below is the content of renderers.js
{
renderer1:(props)=>{
return <renderer1. {...props}/>
}
renderer1:(props)=>{
return <renderer1 {...props}/>
}
grouprenderer:(props)=>{
return <GroupRenderer {...props}/>
}
}
renderer1.js //renderer for header1
renderer2.js //renderer for header2
So when the grid loads initially we are mapping the renderer from renderers.js with the help of the renderer property which is defined in a column definition. Then in gropupRenderer.js, we are accessing the renderer name of that cell from the items array of a column definition, and then corresponding to the renderer name we are calling the defined component. Also we are sending updated data to the renderer component. But the issue we are facing is initially values are getting rendered correctly but as some editing happens in the cell GroupRenderer is not getting called again only the renderer specific to the cell is getting called again(for ex. if editing happens in cell1 then directly renderer1 is getting called without going through grouprenderer. Because of this renderer1 not getting updated value. Can you please help me with this problem?