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('The CELL_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’SUMMARY', CWEC.CELLROW_DBLCLICKCLICK, function(columnId, valuerecord, recordvalue) { LOGGER.info('The CELLROW_DBLCLICKCLICK event is captured.', [columnId, valuerecord, recordvalue]); }); // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

...

• Cell Double Click event

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’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.

  
  

• Row Double Click event

  Code Block
  language js
  CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’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.