Hi ,
do you have an example of pages and select all
when the onHeaderSelectionChange event - select all the items in all pages in grid?
in the documention of selection -
the example below , selected all in current page only
const onHeaderSelectionChange = React.useCallback((event) => {const checkboxElement = event.syntheticEvent.target;
const checked = checkboxElement.checked;
const newSelectedState = {};
event.dataItems.forEach((item) => {
newSelectedState[idGetter(item)] = checked;
});
setSelectedState(newSelectedState);
}, []);
thanks!
1 Answer, 1 is accepted
Hello, Billy,
It is possible to select all fields in the grid across all pages by iterating over all of the data instead of the dataItems. Please review the following example:
https://stackblitz.com/edit/react-rzpy7b-ixr4el?file=app/main.jsx
Here we have added pagination to the grid and iterated over the products collection, instead of the dataItems in the onHeaderSelectionChange:
const onHeaderSelectionChange = React.useCallback((event) => {
const checkboxElement = event.syntheticEvent.target;
const checked = checkboxElement.checked;
const newSelectedState = {};
products.forEach((item) => {
newSelectedState[idGetter(item)] = checked;
});
setSelectedState(newSelectedState);
}, []);
Regards, Philip 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
Thanks!
I tried this , I have a problem , my Data is inside params object,
and starngly , inside the onHeaderSelectionChange event, the params.rows - is empty, but I still see the data inside the grid...
I'll keep trying , Thanks
Rank 1
I managed , i change from useCallback hook, to regular event method, and it works!
but i still have question , if we do select just current page, and not the all pages,
after we check , we don't have the option to unCheck , ?
if i select all pages, we do have the option to unCheck,
but if we used filter, and we select all pages, we yet not have the option to unCheck
how I can resolve this problem?? thanks in advanced!
Hello, Billy,
In the example provided the checkboxes are unchecked as expected. Please share which uncheck is not working as expected.
Rank 1
Hi,
thanks for the reply
here is example , of select in one page only, no option of unCheck.
https://stackblitz.com/edit/react-rzpy7b-4nzslv?file=app/main.jsx
also when use dataState of filter, there is no unCheck option.
looks like if you dont select all total items , there is no unCheck option.
thanks!
Hello, Billy,
The master checkbox does not appear to work because it is currently set to false. In order to toggle the check and uncheck functionality, you need to pass your business logic to the headerSelectionValue and configure it per your needs. In the provided demo we loop the entire data is checked, but we actually select only the current page:
headerSelectionValue={
dataState.findIndex((item) => !selectedState[idGetter(item)]) // use only the current page data if only the current page will be checked.
}Please review this example showing how to enable the checking/unchecking behavior:
https://stackblitz.com/edit/react-rzpy7b-w1bkew?file=app/main.jsx
Regards,
Philip