handle selection , filtering and paging on grid

[Daniel]

Hi, I have a problem handling all the mention in the title you can take a look at this stackblitz that I modify from the selection docs 

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

the problems are:

1. when filtering the product name field and then removing the filter the total items of the grid became only 10 ( should be 77 ).

2. when changing the page the total items also became 10 and only 1 page remained to select.

what I'm doing wrong or there is a better way to handle this?

 

[Konstantin Dikov]

Hi Daniel,

You will have to add the dataResult to the state and set it as data in the Grid. Additionally, within the onDataStateChange event you will need to update the dataResult and the dataState. For your convenience, following is an example with enabled selection, filtering, sorting and grouping (just in case):

• https://stackblitz.com/edit/react-dp6s8w-yykgzf?file=app%2Fmain.tsx

The example has implementation for selection with enabled Grouping, which is slightly different from the standard selection example, so using the above approach should cover all current cases and the cases that might arise in the future.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Daniel]

Hi Konstantin,

Sorry, but I can't manage to solve my problem with this example can you please modify my stackblitz to work as expected?

[Konstantin Dikov]

Hi Daniel,

I just went through my initial reply and I need to make a correction. The data should not be set to a state variable, but the resultData used for getting the total number of items should. I have modified your initial example, so it can work as expected:

• https://stackblitz.com/edit/react-wacgk5-ub6683?file=app%2Fmain.jsx

[Daniel]

Ok thanks, sorry again but I forgot to mention that the data came from an API call on use Effect so what changes do I need to do cause it's not works 

[Konstantin Dikov]

The only difference will be the initial state of the resultState:

  const [resultState, setResultState] = React.useState({
    data: [],
    total: 0,
  });

Within the React.useEffect you should then just update the resultState:

  React.useEffect(() => {
    setResultState(
      process(
        products.map((dataItem) =>
          Object.assign(
            {
              selected: false,
            },
            dataItem
          )
        ),
        initialDataState
      )
    );
  }, []);

The above is in the context of the previous example (here is the updated version https://stackblitz.com/edit/react-wacgk5-raayep?file=app%2Fmain.jsx), but you can replace "products" with the result from the API call.

[Daniel]

Thanks, I will try it.

and on onDataStateChange replace products to resultState.data? 

cause I modify your stackblitz to get the data from API and it's not working as expected

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

 

[Konstantin Dikov]

You are correct that the onDataStateChange should be handled differently. Since the entire data set should be handled within the onDataStateChange for the resultState, within the response you should store the result and use it afterwards within the onDataStateChange event:

• https://stackblitz.com/edit/react-wacgk5-mztcwu?file=app%2Fmain.jsx

As a side note, if you have to enable editing at some point, you can refer to the following sample application for the general approach that should be used when editing through API:

• https://www.telerik.com/kendo-react-ui/components/sample-applications/asp-net-core/
• https://github.com/telerik/kendo-react-datagrid-asp-net-core/blob/master/kendo-react-grid-crud/ClientApp/src/components/Home.js