reactjstelerik-grid

Telerik Kendoo React Grid - Inner grid bubbles the event with wrong metadata


Code sandbox which reproduces the error: https://codesandbox.io/s/pensive-galileo-ksx7nr (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

and I click on "Item 1.2", then my outer grid selects the item "Item 2". Is this a bug? Can I somehow prevent event bubbling from the inner grid maybe as a workaround?


Solution

  • I have received an answer on the Telerik forum about how to check if the event comes from the inner grid, so I am pasting it here:

    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) {
    ...
    }