Hi Team,
I am using select row using checkbox in grid using sample here. https://www.telerik.com/kendo-react-ui/components/grid/selection/
but i also enabled pagination, when i select header checkbox all the items in current page is getting selected, is there way to select all rows in all page in a grid?
Regards,
M. Seenuvasan
1 Answer, 1 is accepted
Rank 2
Iron
Iron
Iron
I will also provide a link to a forum post with an example of how this could be done as well:
https://www.telerik.com/forums/kendo-grid-select-all--on-all-pages
Rank 1
Hi Stefan!
I have a follow-up question after reviewing the post on the above forum. I understand how the select all feature works if you are doing client-side pagination. I'm using server-side pagination, so I'm only able to select segments of the data at a time. Here is my code for the header selection change event:
const onHeaderSelectionChange = useCallback(
event => {
const checkboxElement = event.syntheticEvent.target;
const { checked } = checkboxElement;
const newSelectedState = {};
jobs.all.forEach(item => {
newSelectedState[idGetter(item)] = checked;
});
handleSelectedStateChange(newSelectedState);
},
[idGetter, handleSelectedStateChange, jobs]
);for Grid and header selection
<Grid
{...dataState}
data={jobs.all.map(job => ({
...job,
[SELECTED_FIELD]: selectedState[idGetter(job)],
}))}
//dataState props
pageable
sortable
filterable
total={jobs.total}
editField="inEdit"
onDataStateChange={onDataStateChange}
//selection props
selectable={{
enabled: true,
drag: false,
cell: false,
mode: 'multiple',
}}
dataItemKey={DATA_ITEM_KEY}
selectedField="selected"
onSelectionChange={onSelectionChange}
onHeaderSelectionChange={onHeaderSelectionChange}
>
<GridColumn
title=" "
field={SELECTED_FIELD}
headerSelectionValue={
jobs.all.findIndex(item => !selectedState[idGetter(item)]) ===
-1
}
columnMenu={KendoMenu}
/>I was thinking of adding a boolean in the local state to track whether or not the header is checked, but is there a better way to do this?
Hello,
Thank you for the details.
I can also suggest using the local variable inside the state. That way, when the data from the server is received you can set the selected value of each item based on that variable.