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

4 posts, 0 answers
  1. Grant
    Grant avatar
    179 posts
    Member since:
    Jul 2016

    Posted 17 Nov 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 Nov 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Grant
    Grant avatar
    179 posts
    Member since:
    Jul 2016

    Posted 18 Nov 2020 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 Nov 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top