Click on a Flexgrid row (Angular 5)

Click on a Flexgrid row (Angular 5)

Posted by: frederic.jammes on 3 July 2018, 7:52 pm EST

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 July 2018, 7:52 pm EST

  Hello,

  I’m working with Flexgrid in Angular 5

  I would like to handle the click on a row to get a specific attribute about the item of the row.

  My flexgrid contains a header, a body, and a manually added footer (looking like the one in the following post, to make some custom aggregation : https://www.grapecity.com/en/forums/wijmo/how-to-achieve-custom-aggr).

  I tried using selectionChanged, and it work okish, but there is some issues :

  • "

  • “by default, the first row is selected, so selectionChanged doesn’t occur if I click on the first row”

  • “When I sort my flexgrid, the event selectionChanged occurs (which I don’t want)”

  • “If I click on my footer, the event selectionChanged occurs (which I don’t want)”

  "

  What is the good way to handle a click on a row ?

  Regards,

  Frédéric

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy

  Posted 3 July 2018, 7:57 pm EST

  One other question about this :

  Can you give me a link where I can see which event is triggered by which event ?
  
  For example, I have discovered by myself that sorting trigger selectionChanged.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2018, 10:09 pm EST

  Hi,
  
  You may easily get the info about the FlexGrid’s target cell by using hitTest() method provided by FlexGrid.
  
  You can pass a MouseEvent object as the parameter and get result as HitTestInfo object.
  
  Please refer to following code snippet:

  
  grid.hostElement.addEventListener('mousedown',(e)=>{ 
  	var htInfo=grid.hitTest(e);
  	/* check if clicked cell is grid's main data cell */
  	if(htInfo.cellType==wijmo.grid.CellType.Cell){
  		var rowIndex=htInfo.row;
  		/* rowIndex is the clicked data row index */
  	}
  });
  

  Here is an example of implementing the same:-https://stackblitz.com/edit/angular-caefs8?file=app%2Fapp.component.ts

  The above solution is the recommended approach to find target Cell detail.

  Please refer to this document for more info on HitTestInfo object:-
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.HitTestInfo.Class.html

  Can you give me a link where I can see which event is triggered by which event ?

  We are sorry but currently there is no document which explains about the relation between different event.

  ~Manish

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy

  Posted 5 July 2018, 2:55 am EST

  Hello and thank you for the reply.
  
  I implemented it and it works correctly. It doesn’t look very Angular to add event on an element though.

  Frédéric

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2018, 7:03 pm EST

  Hi,
  
  You may also handle the click event on grid in angular style.

  Please refer to following code snippet

  
  <wj-flex-grid #grid [itemsSource]="data" (initialized)="init(grid)" (click)="gridClickHandler($event,grid)">
  </wj-flex-grid>
  

  Equivalent gridClickHandler method

  
  gridClickHandler(e:MouseEvent,grid:wjcGrid.FlexGrid){
  	var htInfo=grid.hitTest(e);
  	/* do something with hit-test info */
  }
  

  I have also updated the sample accordingly, please have a look and let us know for any further queries:-https://stackblitz.com/edit/angular-fntj9c?file=app%2Fapp.component.ts

  ~Manish

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 7:51 pm EST

  It works, thank you for your time !