grid footercell data passing

[Daniel]

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.

[Stefan]

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}/>

I modified the demo to showcase this:

https://stackblitz.com/edit/react-mffna8?file=app/main.jsx

 

Regards,
Stefan
Progress Telerik

[Daniel]

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.

[Daniel]

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} />
    );
  }
}

[Stefan]

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

[Daniel]

Oh.  Thanks for the followup.  I can see your point when working with class based components, but I'm using functional components with react hooks.  Is it possible to not use a HOC in this case?

[Trevor]

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.

[Stefan]

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

[Daniel]

Thanks for the updated code sample @Stefan.  That makes sense.