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?
1 Answer, 1 is accepted
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):
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
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?
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:
Rank 1
Iron
Iron
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.
Rank 1
Iron
Iron
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
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:
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: