Hi,
https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-footer-cells
The UnitsInStockCell component directly uses the products data. I don't see a way for the data to be passed through via the FooterCell props. What's are some options for passing the data down through props? Kind of like the sample code below
const UnitsInStockCell = (props) => { // HERE --- if i wanted to reference the data from props.data instead, how can I do this? const total = props.data.reduce((acc, current) => acc + current[props.field], 0); return ( <td colSpan={props.colSpan} style={props.style}> total: {total} </td> );}
Thanks.
8 Answers, 1 is accepted
Hello, Daniel,
This can be done by using a function that will pass the default props and add the extra ones:
class App extends React.PureComponent {
myUnitsInStockCell = (props) => <UnitsInStockCell {...props} data={products}/>https://stackblitz.com/edit/react-mffna8?file=app/main.jsx
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Hi. I looked over your sample code, but there is still something missing.
myUnitsInStockCell = (props) => <UnitsInStockCell {...props} data={products}/>
the products that get assigned to the data prop is still static mock data that can not change over time. In my app, I need to access the grid's data prop (https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-data) from the FooterCell. That way, when the grid's data changes, then the FooterCell can recompute the value.
Thanks.
Rank 1
Veteran
Oh, I figured it out. I can create a higher order function/component that wraps the grid's data property. Thanks @stefan.
const Container = (props) => ( <Grid> <Column ... footerCell={makeFooter(props.data)} .... /> </Grid>);function makeFooter (data) { return function Footer (props = {}) { return ( <FooterCell {...props} data={data} /> ); }}Hello, Daniel,
I'm glad to hear that this is already working.
I just want the clarify that the HOC is not always required, as we can pass to the footer cell the data that is bound to the state. In our example, we pass products because this is what is passed to the Grid as well. With the same approach, we can pass any values and data from the state or the props.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Rank 1
I'm having a similar problem, but my columns are being dynamically generated before the rows are processed, so the rows are not available to pass to footer cell in this manner. Having the rows embedded in a dataItem passed to the footer the same way the other cells receive relevant data would solve this.
Or, having a footerCellRender prop, same as we have cellRender, headerCellRender, and filterCellRender, could also solve the problem, as that could give a spot to inject the rows by returning a render function from footerCell and calling it in renderFooterCell with the rows.
This inconsistency between footerCells and all the other cells is frustrating.
Hello, Daniel, Trevor,
I updated the example to use hooks and to use a columns collection:
https://stackblitz.com/edit/react-mffna8-m1vymk?file=app/main.jsx
We agree that a footCellRender can prove helpful in these cases:
https://github.com/telerik/kendo-react/issues/572
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran