Defining Events

To capture any action on the rows in the grid, such as click or double-click, you must define events in the Row Template.

The Row Template supports the following events:

• Cell Click and Row Click events
• Cell Double-Click and Row Double-Click events
• Change event
• Context Click event

Anchor
RowTemplate_CellClickRowClick RowTemplate_CellClickRowClick

Cell Click and Row Click Events

The Cell Click event occurs when a cell is clicked once. The Cell Click event also raises the Row Click event.

The Row Click event occurs when a row is clicked once.

...

On a Row Click event, the column ID is returned followed by the row details and the template configuration (value) as shown in the following screen shot:

To capture actions through the Cell Click and Row Click events, use the event handler functions. For the Deposit Summary app, you need to capture the actions as follows:

• Cell Click event
  

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.CELL_CLICK, function(columnId, value, record) { LOGGER.info('firedThe CELL_CLICK click event is captured.', [columnId, value, record]); }); // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

• Row Click event
  

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.CELL_DBLCLICK, function(columnId, value, record) { LOGGER.info('The CELL_DBLCLICK event is captured.', [columnId, value, record]); }); // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

Anchor
RowTemplate_CellDblClickRowDblClick RowTemplate_CellDblClickRowDblClick

Cell Double-Click and Row Double-Click Events

The Cell Double Click event occurs when a cell is clicked twice. The Cell Double Click event also raises the Row Double Click event.

The Row Double Click event occurs when a row is clicked twice.

For example, the Cell Double Click event occurs when you double click on a cell (highlighted in the following screen shot) of the row.

Image Added

To achieve this, you need to define the Cell Double Click event attributes in the Row Template as follows:

<div 
	class = 'col-lg-6'
	style = 'border: 1px solid #ccc;'>

	<input 
		type = 'checkbox' data-input="true">

	    {{ #each record }}
	    
	    <div 
			class = "{{ this.cssClass }} text-center"
			data-item-id = "ct-tpl-record"
			data-item-data = "{{ this.COL_INDEX }}"
			data-row-index = "{{ this.rowIndex }}"
			data-single-click = 'true'
			data-column-id = '{{ this.COL_ID }}'
			data-context-click = 'true' >

	       <b> {{{ this.COL_NAME }}}:  {{{ this.VALUE }}} </b>

	    </div>

	    {{ /each }}

</div>

On a Cell Double Click event, the column ID is returned followed by the template configuration (value) and the row details as shown in the following screen shot:

Image Added

On a Row Double Click event, the column ID is returned followed by the row details and the template configuration (value) as shown in the following screen shot:

Image Added

To capture actions through the Cell Double Click and Row Double Click events, use the event handler functions. For the Deposit Summary app, you need to capture the actions as follows:

• Cell Double Click event

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.CELL_DBLCLICK, function(columnId, value, record) { LOGGER.info('firedThe CELL_DBLCLICK event is captured.', [columnId, value, record]); }); // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

• Row Double Click event

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.ROW_DBLCLICK, function(columnId, record, value) { LOGGER.info('The ROW_DBLCLICK event is captured.', [columnId, record, value]); }); // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

Change Event