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’SUMMARY', CWEC.CELL_CLICK, function(columnId, value, record) { LOGGER.info('firedThe CELL_CLICK clickevent 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.ROW_CLICK, function(columnId, record, value) { LOGGER.info('The ROW_CLICK event is captured.', [columnId, record, value]); }); // 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’SUMMARY', CWEC.CELL_DBLCLICK, function(columnId, value, record) { LOGGER.info('fired CELL_DBLCLICKThe 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.

  
  

Anchor
RowTemplate_ChangeEvent RowTemplate_ChangeEvent

Change Event

The Change event occurs when the value of an element is changed. For example, selecting or clearing a checkbox or radio button. The change event also raises the cell click and row click events.

For example, when you select and clear the checkbox on a cell of the Deposit Summary widget, the Change event is triggered.

Image Added

To achieve this, you can configure the template as follows:

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

    {{ #each record }}

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

       <b> <input type = "checkbox"/> {{{ this.VALUE }}} </b>

    </div>
    
	{{ /each }}

</div>

When you select the checkbox the Change event triggers and the column ID followed by the template configuration (value) and the row details are returned. An additional attribute data-checked = ”checked” is added to the template configuration. When the checkbox is cleared this attribute gets removed from the template configuration as shown in the following screen shots:

After selecting the checkbox:

Image Added

After clearing the checkbox:

Image Added

To capture actions through the Change event, use the event handler functions. For the Deposit Summary app, you need to capture the actions as follows:

CWEH.registerHandler('WGT_DEPOSIT_SUMMARY', CWEC.CELL_DATA_CHANGE, function(columnId, value, record)
{
	LOGGER.info('The CELL_DATA_CHANGE event is captured.', [columnId, value, record]);
});

// Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

Anchor
RowTemplate_ContextClick RowTemplate_ContextClick

Context Click Event

A Context Click event is raised when you right-click on a cell or row in the widget. For example, when you right-click on a cell of the Deposit Summary widget, a context menu (Initiate Payment) appears.

The following is a screen shot of the Deposit Summary widget with the context menu enabled:

Image Added

A sample Context Click event code is as follows:

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

    {{ #each record }}

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

       <b> <input type = "checkbox"/> {{{ this.VALUE }}} </b>

    </div>
    
	{{ /each }}

</div>

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

Image Added

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

CMHR.registerHandler('WGT_DEPOSIT_SUMMARY', CWEC.CONTEXT_CLICK, function(columnId, value, record)
{
	LOGGER.info('The CONTEXT_CLICK event is captured.', [columnId, value, record]);
});

// Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.