Retain selection of checkbox when we navigate across different page

Hello, Mukesh,

This should be automatically happening if the selected value is saved in the state.

The selection depends on the selected property of the data row.

If the row is set as selected, changing the pages should not affect it.

https://stackblitz.com/edit/kendo-react-selection-current-page-42coot?file=app/main.jsx

If the data is dynamically changed, I can suggest on the onSelectionChange event to keep the ids of the selected items in the state, and to apply them when the data is changed.

Regards,
Stefan
Progress Telerik

In this example you have already brought all the data from datasource.

In my case my data is coming from API. I have configured server side paging and sorting. 

In that case how to retain selection. can you please provide an example.

 

The example you have shared in throwing below issue in browser console. Is there any way to overcome that.

 

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by GridSelectionCell)
    in td (created by GridSelectionCell)
    in GridSelectionCell (created by KendoReactGrid)
    in tr (created by GridRow)
    in GridRow (created by KendoReactGrid)
    in tbody (created by KendoReactGrid)
    in table (created by KendoReactGrid)
    in div (created by KendoReactGrid)
    in div (created by KendoReactGrid)
    in div (created by KendoReactGrid)
    in div (created by KendoReactGrid)
    in KendoReactGrid (created by App)
    in div (created by App)
    in App

Hello, Mukesh,

I have made an example with server side paging and retaining the selected rows.

The idea is to keep the selected items by their ids inside the state.

https://stackblitz.com/edit/react-valgmy?file=app/main.jsx

As of the warning, it is not shown in the new example.

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Thanks that helps.

Please tell me one more thing, when page loads for the very first time why the header checkbox is show as checked. Once the data is loaded it is unchecked again.

Is there any way to overcome that as well.

Hello, Mukesh,

Thank you for noticing that.

It occurs because the check I made in the demo will return true when there is not data. I changed it to work as expected.

This is the part of the code in the demo that determines if the checkbox will be checked:


https://stackblitz.com/edit/react-valgmy?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Thanks Stefen's

But with below change as soon as you check any one record in the grid. Header checkbox is getting checked which is not correct.

The header checkbox should only get checked when all the records in the page are selected.

Hello, Mukesh,

Apologies, I tested only the loading and clicking the checkbox in the header.

This is an updated example:

https://stackblitz.com/edit/react-valgmy?file=app/main.jsx

Regards,
Stefan
Progress Telerik