I have some trouble with the multiselection I want to do something every time a Item is selected When I do this all work until it change a state(via the setState) that is no related this grid and it reload the data and deselect the items that was selected
One possible explanation could be:
Component Re-rendering: In React, when you use setState, it triggers a re-render of the component. If your component or a parent component holds the grid and its selection state, changing an unrelated state could still cause the entire component to re-render. If the selection state isn’t properly managed or tied to a persisting state across re-renders, you’ll lose the selections.
Another could be:
Improper Key Usage: React uses keys to identify which items have changed, been added, or are removed. If keys are not properly used or are based on indexes that could change, React might incorrectly manage these items upon re-rendering, affecting things like selection state
const [selectedItems, setSelectedItems] = useState<FacturaDtoFrontend>();
const gridRef = useRef(null);
const [montoTotal, setMontoTotal] = useState(0)
return(
<>
{{montoTotal}}
<Grid
dataProvider={facturaProvider}
selectedItems={selectedItems}
ref={gridRef}
onSelectedItemsChanged={() => {
let selectedFacturas = gridRef.current?.selectedItems
let sum = 0;
selectedFacturas.map((f: FacturaDtoFrontend) => {
sum = sum + f.monto!
})
// setMontoTotal(sum)
}}
>
more columns…(all this do not have the montoTotal state)
</>
Its something like this, When I uncoment the setMontoTotal it refresh the Grid
even thought the monto total is not being using on parent element
I am new on React maybe I am wrong
Sorry I forgot to reply I send a bit of context
In your example, most likley the problem is that selectedItems. SelectedItems list is not updated and then it re-selects values with empty list.
Try something like this:
onSelectedItemsChanged={(e) => { setSelectedItems(e.detail.value); let selectedFacturas = gridRef.current?.selectedItems let sum = 0; ...