Rank 1
Code sandbox which reproduces the error: pensive-galileo-ksx7nr - CodeSandbox (you need to click to expand a row, then you will have an inner grid, try to click on items inside and see how outer grid selection changes)
I have a Grid and in details row I have another grid (detailRow={MyCoponentWithAnotherGrid}). When I click on the row within the inner grid, also the outer grid fires the event onSelectionChange. It is normal but inside the event for this outer grid, I have info that the even was fired for the outer grid but the endRowIndex property of the event shows that the item clicked had index from the inner grid. Because of that, when I use
getSelectedState({
event,
selectedState: selectedState,
dataItemKey: DATA_ITEM_KEY,
});It returns me the new selection which selects the item under the same index as in the inner grid... but this event is in the outer grid. So If i have a grid like this:
- Item 1 - Item 1.1 - Item 1.2 -Item 2
1 Answer, 1 is accepted
Hello Adrian,
Thank you for reaching out to us.
The internal logic for the getSelectedState uses the target element and if it is a TR element it will use the index of that row within the TABLE to select the item. In scenario with Detail table, the row index from the inner table will be used, which leads to the wrong result. However, you can add the following check within the onSelectionChange of the master Grid and see if the target is a detail row or no:
const onSelectionChange = (event) => {
let targetEl = event.nativeEvent.target;
let isDetail = false;
while (targetEl.tagName != 'BODY') {
if (targetEl.tagName == 'TR') {
if (targetEl.className.indexOf('k-detail-row') >= 0) {
isDetail = true;
break;
}
}
targetEl = targetEl.parentNode;
}
if (!isDetail) {
const newSelectedState = getSelectedState({
event,
selectedState: selectedState,
dataItemKey: DATA_ITEM_KEY,
});
setSelectedState(newSelectedState);
let newData = data.map((item) => ({
...item,
[SELECTED_FIELD]: newSelectedState[idGetter(item)],
}));
setData(newData);
}
};Please give this a try and see if everything is working as expected.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1