Grid row selection doesn't work correctly if its detail cell is a grid

[Jie]

Hi,

Please see example https://codesandbox.io/p/sandbox/dry-tdd-9hqysc?file=%2Fapp%2Fapp.tsx

The example shows a master grid with selection enabled. Master grid contains a detail grid which also have selection enabled. The problem is, when clicking a row in detail grid, the selection in master grid changes, and the detail grid's selection doesn't change.

 

Thanks,

Jie

 

[Yanko]

Hi, Jie,

When selection is enabled for both parent and detail grid you need to implement separate functions for the `onSelectionChenge` event to select the rows accordingly. Also when the detail row is clicked the parent row is also clicked. Therefore you need to include logic to determine whether the selection event was invoked from the detail or the parent component:

//parent grid onSelectionChange  
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) {
     //selection logic
    }
  };

I prepared an example that displays a Master Detail Grid with enabled selection for both the master and the detail grids:

• https://stackblitz.com/edit/react-kenryc-skghof2z?file=app%2Fapp.jsx  

If any inquiries arise on the topic please let me know.

Regards,
Yanko
Progress Telerik