Flexgrid, angular2 and double-click

Flexgrid, angular2 and double-click

Posted by: julianwijmo on 14 September 2017, 11:58 am EST

• 

  julianwijmo

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:58 am EST

  Ok, so I may be missing something really obvious, but is there an event I can bind to in order to get a double-click event on a row ? I have set the grid to read-only, the selection mode to “row” / 3 and added a

  (dblclick)="onRowDblclicked($event)

  option to the template.

  I do get an event, but it is a “mouseEvent”, of type “double-click”, which is not what I expected. I have been evaluating several other grids, and they seem to supply an event with $event.data, where data is the selected row - is this not a standard feature ?

• 

  julianwijmo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:59 am EST

  ok, so a little more digging:

  dblclick

  is an angular2 event, not the expected wijmo event. So I can’t find a

  rowDoubleClick

  event, and tried using the

  selectionChanged

  event. This is an issue because this event fires when the grid is first drawn, not just when a user selects a row.

  Basically, I want to be able to let a user select a row, either by clicking or double-clicking and an event to be raised with $event.data holding the selected row.

  Can anyone point me to the right place in the docs for this ?

• 

  julianwijmo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:59 am EST

  ok, so I kinda faked it with this construct:

  <wj-flex-grid 
      [itemsSource]="rowData" 
      [isReadOnly]="true" 
      [selectionMode]="'Row'" 
      (dblclick)="onRowDblclicked({data: grid.selectedRows[0].dataItem})" #grid>
  </wj-flex-grid>;
  

  But would still like to know if this is the best way of achieving the result

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:59 am EST

  Hello,
  
  If you would like to use only data of selected row, this is the best way but if you would like to use row number and column number etc, please use hitTest method that returns information about part of FlexGrid.

  For reference, please use the following code snippet for the same:
  
  HTML:

  <wj-flex-grid #grid
      [itemsSource]="rowData" 
      [isReadOnly]="true" 
      [selectionMode]="'Row'" 
      (dblclick)="onRowDblclicked(grid,$event)">
  </wj-flex-grid>

  TS code:

  // e is mouse event argument
  onRowDblclicked (s:wjGrid.FlexGrid, e:any){
     let ht= s.hitTest(e);
     console.log(ht, s.selectedRows[0].dataItem);
  }

  You can also use selectedItems for getting selectedItem.
  
  

  {data: grid.selectedItems[0]}

  Hope it helps !

  Thanks,
  
  Manish Kumar Gupta

• 

  dustin.cleveland3

  • Post Options:
  • Link
    Copy

  Posted 28 October 2017, 11:24 am EST

  (dblclick)="onRowDblclicked({data: grid.selectedRows[0].dataItem})"
  

  Although this mostly works, it does not take into account double clicks that happen on row or column headers. Therefore, you could double click the header and whatever row in the grid is selected will be sent along with the event, even though you didn’t actually double click on it.

  Using the hit test method, you can check the cell type of the HitTestInfo object to determine if a cell was clicked, which provides a better result.

  It’s kind of unfortunate that there isn’t a hook for this built in. I hate having to write all the boilerplate to setup and check the hit test.