28
Views
6
Comments
Solved
[OutSystems Data Grid] How to trigger different client action when we click on action column in Datagrid
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hello all,

I have a requirement where when we click on an action column cell in data grid not the hyperlink inside the column, I need to trigger a different client action. Any suggestions will be helpful.


Pic.jpg
2025-12-04 09-01-03
Kiet Phan
Champion
Solution

@Ranjith Kumar Govindharaj
The code below will works:

  1. let myGrid = OutSystems.GridAPI.GridManager.GetGridById("MyGrid").provider;
  2. myGrid.hostElement.addEventListener('click', function(e) {
  3.     var ht = myGrid.hitTest(e);
  4.     if (e.target.tagName === 'A') {
  5.         // Stop event propagation so it doesn't trigger the cell click event
  6.         e.stopPropagation();
  7.         return;
  8.     }
  9.     if (ht.cellType == wijmo.grid.CellType.Cell) {
  10.         var rowIndex = ht.row;
  11.         var colIndex = ht.col;
  12.         console.log('rowIndex = ',rowIndex);
  13.         console.log('colIndex = ',colIndex);
  14.         // If (colIndex === 2) { // Call your client action }
  15.     }
  16. });
UserImage.jpg
Ranjith Kumar Govindharaj

@Kiet Phan 

It works. Thanks for the solution.

Regards,

Ranjith Kumar

2025-12-04 09-01-03
Kiet Phan
Champion
2025-12-04 09-01-03
Kiet Phan
Champion

Hi @Ranjith Kumar Govindharaj 

Let use this JS below to call your client action when a cell click event triggered.

  1. let myGrid = OutSystems.GridAPI.GridManager.GetGridById("MyGrid").provider;
  2. myGrid.hostElement.addEventListener('click', function(e) {
  3.     var ht = myGrid.hitTest(e);
  4.     if (ht.cellType == wijmo.grid.CellType.Cell) {
  5.         var rowIndex = ht.row;
  6.         var colIndex = ht.col;
  7.         console.log('rowIndex = ',rowIndex);
  8.         console.log('colIndex = ',colIndex);
  9.         // If (colIndex === 2) { // Call your client action }
  10.     }
  11. });

The result:

UserImage.jpg
Ranjith Kumar Govindharaj

@Kiet Phan 

Thanks for the reply. The problem here is this will trigger both the Click Event client action as well as the action called in JavaScript for an Action column when I click on the hyperlink inside. I do not want the action called in the JavaScript triggered when I click on the hyperlink. 

2025-12-04 09-01-03
Kiet Phan
Champion

@Ranjith Kumar Govindharaj
OKay, since the hyper link inside the action column is a tag. Let prevent the handler from triggered by hyperlink.

2025-12-04 09-01-03
Kiet Phan
Champion
Solution

@Ranjith Kumar Govindharaj
The code below will works:

  1. let myGrid = OutSystems.GridAPI.GridManager.GetGridById("MyGrid").provider;
  2. myGrid.hostElement.addEventListener('click', function(e) {
  3.     var ht = myGrid.hitTest(e);
  4.     if (e.target.tagName === 'A') {
  5.         // Stop event propagation so it doesn't trigger the cell click event
  6.         e.stopPropagation();
  7.         return;
  8.     }
  9.     if (ht.cellType == wijmo.grid.CellType.Cell) {
  10.         var rowIndex = ht.row;
  11.         var colIndex = ht.col;
  12.         console.log('rowIndex = ',rowIndex);
  13.         console.log('colIndex = ',colIndex);
  14.         // If (colIndex === 2) { // Call your client action }
  15.     }
  16. });
UserImage.jpg
Ranjith Kumar Govindharaj

@Kiet Phan 

It works. Thanks for the solution.

Regards,

Ranjith Kumar

2025-12-04 09-01-03
Kiet Phan
Champion
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.