React Grid: I need a simple example of the use footerCell for count and sum of columns in the latest Kendo builds

[Dave]

I found older examples using pre React 18  and but they are not working for me.

[Vessy]

Hi, Dave,

Below you can see a sample demonstrating how to implement a custom sum/total footerCell for a grouped column using the latest version of React and KendoReact:

• https://stackblitz.com/run/?file=index.js 

Is this the scenario that you are after or can you share some more details on the target result? You can also send me the found sample using React 18 so I can advice you how to upgrade it.

Regards,
Vessy
Progress Telerik

[Dave]

https://stackblitz.com/edit/react-9cw5ko?file=app%2Fmain.jsx

The above is a simple example. The above example is from an older build of Kendo React.  I am not interested in the Excel issues but would like to se this running in the latest Kendo React build.  I can run the footer aggregation in the Kendo Query grid just fine.

how to implement a custom sum/total footerCell  is hard for me to follow  .. it is not a simple example.

 

Thanks

 

 

[Vessy]

Hi, Dave,

Thanks a lot for the provided sample. In order to migrate it to the latest version of the Grid you just need to use the cells.footerCell prop in order to the deprecated footerCell one. For example:

• https://stackblitz.com/edit/react-v4ejbx5x-y7a5sy9l?file=app%2Fapp.tsx 

[Dave]

How to make it work with filtering?

https://stackblitz.com/run/?file=app%2Fapp.jsx

I have been using the JQuery version for 2 years and it works for me in the JQuery version .. works different in React.

Thanks for your help

 

 

[Dave]

This is the filtered grid reference  not the one above

https://stackblitz.com/edit/react-wdb3edkz?file=index.js

 

The total does not update after filter reset

[Vessy]

Hi, Dave, 

I tried to replicate the described behavior in the shared demo but the items in the Grid are properly reset to total when I clear the filter. Can you take a look at the video from my test below and see whether I am leaving any step out?

• https://somup.com/cTijDVLWcM 

[Dave]

The issue is that the Total is not updating after the filter data changes

I need the total to be based on the viewed data.

 

Thanks

[Alexander]

Hi, Dave,

The issue appears to be that the code is looping over the `sampleProducts` array, which contains all the initial records. I can recommend filtering out only the results left after applying the selected filters. This can be achieved by using the `filterBy` function provided in our Data Query package and passing the initial `sampleProducts` array and the currently selected filter:

• https://stackblitz.com/edit/react-wdb3edkz-zyr14xhh?file=app%2Fapp.jsx

You can read more about filterBy here:

• https://www.telerik.com/kendo-react-ui/components/dataquery/api/filterby
  

Please let me know in case the issue still persists on your end and I will gladly assist further in resolving it.

Regards,
Alexander
Progress Telerik

 

[Dave]

Thnaks