Getting processed (filtered/sorted/etc) data from KendoGrid

[Grant]

Hi, 

As my title says, Im trying to get the processed data from a ReactGrid, in jQuery it would be the equivilent of the grid view, ie the data hat is visible to the user after when its filtered/sorted/paged/etc. How can I do this in React?

A simplified scenario of what Im trying to achive is as follows:
- I have a list of "Customers", a grid of "Orders", and a grid of "Agents" that place the orders.
- When I select a customer, the orders must be filtered by the selected customer, and the agents must be filtered by the which ones placed the filtered orders.

eg:
There are 5 Agents and 20 Orders. When a customer is selected, the list of orders is filtered down to 10 Orders, and 2 Agents. Because of the 10 orders for the selected customer, only 2 agents were involved in placing them.

I hope the above makes sense.

I have the list of "orders" filtering, but Im having trouble filtering the "agents" based on the results of the filtered orders.

Please advise.

Thanks,
Grant

PS. Im new to React, so please keep that in mind if your solution is quite technical. Thanks

[Stefan]

Hello, Grant,

This can be done using our process method.

In React, the data is processed by the developer, not automatically by the component as the React state is the source of the true data state.

I can suggest the local data operation article where we explain in steps how the process the data:

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations/

You can also process the data outside of the Grid, for example when clicking a customer from the list, we can create a filter expression using this format, and filter the data based on that:

https://www.telerik.com/kendo-react-ui/components/dataquery/bulk-operations/#filtering

A similar case can be seen in our getting started example, where we use a DropDownList to filter the Grid data based on the selected category:

https://stackblitz.com/edit/github-hyehx2?file=src/App.js

https://www.telerik.com/kendo-react-ui/getting-started/

If additional assistance is needed, please let me know if there are specific areas that are not clear and I will try to provide more details on that.

Regards,
Stefan
Progress Telerik

[Grant]

Hi Stephen, 

Thanks for getting back to me.

I meant to include that I have been using the process() method outside a grid to filter data. What prompted me to send post however was that when console.log the processed data, I get an array of Proxy objects (see attachment). I have tried to duplicate the behavior in this StackBlitz, but was unsuccessful. If I iterate over the proxy array, I can still read the content of the filtered objects though.

After looking at the attachment, is this behavior familiar to you and can you explain it please?

Thanks,
Grant

[Stefan]

Hello, Grant,

Thank you for the extra details.

This may be caused by the type of data passed to the process method. For example, the data is not a pure JSON, but Proxy data. Could you please try to parse the proxy data to JSON before passing it to the process method or to the Grid?

Could you please log the data in the console before the process method to see its structure, as I assume that it is a proxy array before the process method?

Regards,
Stefan
Progress Telerik