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

...

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

...

Anchor
RowTemplate_CellClickRowClick RowTemplate_CellClickRowClick

Cell Click and Row Click Events

The Cell Click event occurs when a row 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('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’, 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.

  
  

...

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.

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

Image Removed

To achieve this, you can configure the template 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>

When you select the checkbox the Change event triggers and On a Context Click, 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 is returned followed by the template configuration (value) and the row details as shown in the following screen shotsimage:

After selecting the checkbox:

Image Removed

After clearing the checkbox:

Image Removed

Image Added

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

CWEHCMHR.registerHandler('WGT_DEPOSIT_SUMMARY’SUMMARY', CWEC.CELLCONTEXT_DATA_CHANGECLICK, function(columnId, value, record)
{
	LOGGER.info('The CELLCONTEXT_DATA_CHANGECLICK event is captured.’', [columnId, value, record]);
});

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

...