selectedState contains an object - What next?

[Charlie]

I copied the sample code at Customizing the Selection to build my first multi-select grid with checkboxes. After I added a button with a handler to log selectedState I see that it contains an object:

{
    "1": true,
    "2": false,
    "3": true,
    "4": true,
    "5": true
}

Apologies for the naive question, but how does this help me process the selected rows? Are there JS techniques for putting this content in an array? Is there some way to filter an object?

I need to get an array of selected rows to move my project forward. I'm just not clear how to take the default state and use it.

[Stefan]

Hello, Charlie,

I can suggest checking this forum post on a similar topic:

https://www.telerik.com/forums/reading-all-items-from-kendo-react-grid-using-onselectionchange

I think that this example from the discussion will be the best for you. Still, take a look at all of them to see which one is better for your case:

https://stackblitz.com/edit/react-c15bug-w1gwf1?file=app/main.tsx

Regards,
Stefan
Progress Telerik

[Charlie]

Thank you, Stefan. Is there a Stackblitz example that uses JS instead of TS? I'd love to start using the Grid but can't find an example of looping over selected rows that uses Hooks and JS.

[Stefan]

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]
  );

JS version:

  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]
  );

If there is an issue transferring the example, please let me know and I will be happy to assist.

[Charlie]

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?

[Stefan]

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.

[Charlie]

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?

[Charlie]

I figured out how to set the initial page size.

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

I would still like to know if it's possible to "select all" and capture only the filtered rows.

[Stefan]

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.