Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Manikanta Vundavalli
385
Unselect a Row on clicking it if it is already selected(without checkbox- HideRowSelector- TRUE)
posted

Right now in multiple row selection, I can select a row, but I can't unselect it.

(onRowSelectionChange) the function is triggered only if a row is unselected.

when a row is selected and I am again clicking the row, but this time (onRowSelectionChange) is not getting triggered.

can you help me with this?

Thanks,

Mani

Parents
No Data
Reply
  • 2560
    Offline posted
    Hello Mani,

    Thank you for reaching out.

    I have been looking into your question and can confirm that this behavior of the IgxTreeGrid is expected. According to our documentation about Row Selection, a row can be selected by clicking on the row selector or by pressing the “Space” key. The reason the OnRowSelectionChange event gets triggered when clicking on any cell is that the row also gets selected. However, the row would not be deselected by clicking on it again. As mentioned, the default behavior is that the “Space” key toggles the row selection state when any cell in the row is focused.

    Having this in mind, I prepared a small sample that demonstrates how your requirement can be achieved. This solution involves handling the onCellClick event of the grid, where the clicked cell’s row selection state is toggled, and we keep track of the cell click in a boolean variable. Additionally, the default row selection behavior is canceled if a cell was clicked. This logic is needed so that some of the tree grid’s default selection features are also preserved, such as row selection toggle on “Space” key press, or row range selection on “Shift” key press and cell click. Also, please keep in mind that this solution is a workaround and may not be applicable to all scenarios.

     

      public onCellClick(event) {
    if (event.event.shiftKey) {
      this.cellWasClicked = false;
      return;
    }
    let rowID = event.cell.cellID.rowID;
    if (!event.cell.row.selected) {
      this.treeGrid.selectRows([rowID], false);
    } else {
      this.treeGrid.deselectRows([rowID]);
    }
    this.cellWasClicked = true;
  }
  public handleRowSelection(event) {
    if (this.cellWasClicked) {
      event.cancel = true;
      this.cellWasClicked = false;
    }
  }

     

    You can find the sample here. Please, test it on your side and let me know if I may be of any further assistance.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer
Children
No Data