grid footercell data passing

9 posts, 1 answers
  1. Daniel
    Daniel avatar
    14 posts
    Member since:
    Apr 2020

    Posted 29 Apr 2020 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 30 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Daniel
    Daniel avatar
    14 posts
    Member since:
    Apr 2020

    Posted 30 Apr 2020 in reply to Stefan Link to this post

    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.

  4. Daniel
    Daniel avatar
    14 posts
    Member since:
    Apr 2020

    Posted 30 Apr 2020 Link to this post

    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} />
        );
      }
    }
  5. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 01 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  6. Daniel
    Daniel avatar
    14 posts
    Member since:
    Apr 2020

    Posted 01 May 2020 in reply to Stefan Link to this post

    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?
  7. Trevor
    Trevor avatar
    4 posts
    Member since:
    Aug 2018

    Posted 01 May 2020 Link to this post

    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.

  8. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 04 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  9. Daniel
    Daniel avatar
    14 posts
    Member since:
    Apr 2020

    Posted 04 May 2020 in reply to Stefan Link to this post

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