selectedState contains an object - What next?

Hello, Charlie,

The JS version is the same. The only difference is that it does not have the typings. You can copy the same logic, remove the types and it will work in pure JS. Example on the difference:

TypeScript version:

  const onSelectionChange = React.useCallback(
    (event: GridSelectionChangeEvent) => {
      let theSelectedItem = event.dataItems[event.endRowIndex]
       let newData = data.map(item => {
          if(item.ProductID === theSelectedItem.ProductID) {
            item.selected = !item.selected;
          }
          return item;
        })
        setData(newData)
    },
    [data]
  );

  const onSelectionChange = React.useCallback(
    (event) => {
      let theSelectedItem = event.dataItems[event.endRowIndex]
       let newData = data.map(item => {
          if(item.ProductID === theSelectedItem.ProductID) {
            item.selected = !item.selected;
          }
          return item;
        })
        setData(newData)
    },
    [data]
  );

Thanks for the education, and your generosity, Stefan. I have a JS version with checkboxes. Unfortunately, the sample code you shared doesn't quite match my goal. I want to select checkboxes, including the header row checkbox, to multi-select rows in the grid. Once that's accomplished I want to press a button and loop over each of the selected rows. I haven't been able to do that yet. Any additional guidance you can provide would be much appreciated.

The primary obstacle is not understanding the difference between the data, dataState, and selectedState hooks. Why are there three pieces of state holding our data, and what are the differences?

Hello,

I made a new JS example that covers the listed requirements:

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

Also to what all of these values are:

- data - This is the data for the Grid that we keep in the state. These are all data items that have the updated selected information.

- dataState - This is a specific value for the Grid that holds information for paging, sorting, filtering, and grouping.

- selectedState  - This is not needed with this approach and can be removed. It is used by our getSelectedState method when that is used.

Thank you for combining these issues into a single Stackblitz. Paging is enabled on that grid with a default size of 10. However, on the initial render all 77 items are shown.

1. How do I limit the initial state to only the page size?
2. When checking the "select all" checkbox in the column header is it possible to only select records in the current page?

I figured out how to set the initial page size.

  const [data, setData] = useState([])
  const [dataState, setDataState] = useState({ skip: 0, take: 25 })

Hello, 

Yes, that is possible by only updating the items in the current page range:

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

Please have in mind that all of this is done on the application data level. That means that the developer has many different options and in order to achieve them, the data has to be manipulated accordingly.