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

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.

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

To achieve this, you need to define the Cell 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 Click event, the column ID is returned followed by the template configuration (value) and the row details as shown in the following screen shot:

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
  

  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.CELL_CLICK, function(columnId, value, record)
  {
  	LOGGER.info('fired CELL_CLICK click', [columnId, value, record]);
  });
  
  // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

• Row Click event
  

  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’, CWEC.CELL_DBLCLICK, function(columnId, value, record)
  {
  	LOGGER.info('fired CELL_DBLCLICK', [columnId, value, record]);
  });
  
  // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.