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('The CELL_CLICK event is captured.', [columnId, value, record]);
  });
  
  // Here, 'WGT_DEPOSIT_SUMMARY' is the widget ID.

  
  

• Row Click event
  

  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.

  
  

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.

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:

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:

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

  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.

• Row Double Click event

  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

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.

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:

After clearing the checkbox:

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.

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:

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:

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.