Defining Events

To capture any action on the columns in the grid, such as click or double-click, you must define events in the Column Template.

The Column 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, when you click a textbox on the Reference Number column of the Beneficiary Details widget, the Cell Click event is raised.

To achieve this, you need to define the Cell Click event attributes in the Column Template as follows:

<input 
	type = "text"
	data-single-click = "true"
	value = {{ BENE_ID }}
	data-column-id = "BENE_ID"
>
<!-- BENE_ID is the Reference Number column's ID. -->

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

To capture actions through the Cell Click and Row Click events, use the event handler functions. For the Reference Number column, you need to capture the actions as follows:

• Cell Click event
  

  CWEH.registerHandler('BENE_WGT', CWEC.CELL_CLICK, function(columnId, value, record)
  {
  	LOGGER.info('The CELL_CLICK event is captured', [columnId, value, record]);
  });
  
  // Here, 'BENE_WGT' is the widget ID.

• Row Click event
  

  CWEH.registerHandler('BENE_WGT', CWEC.ROW_CLICK, function(columnId, record, value)
  {
  	LOGGER.info('The ROW_CLICK event is captured.', [columnId, record, value]);
  });
  
  // Here, 'BENE_WGT' 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, when you double click a textbox on the Reference Number column of the Beneficiary Details widget, the Cell Double Click event is raised.

To achieve this, you need to define the Cell Double Click event attributes in the Column Template as follows:

<input 
	type = "text"
	data-single-click = "true"
	value = {{ BENE_ID }}
	data-column-id = "BENE_ID"
>
<!-- BENE_ID is the Reference Number column's ID. -->

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

To capture actions through the Cell Double Click and Row Double Click events, use the event handler functions. For the Reference Number column, you need to capture the actions as follows:

• Cell Double Click event

  CWEH.registerHandler('BENE_WGT', CWEC.CELL_DBLCLICK, function(columnId, value, record)
  {
  	LOGGER.info('The CELL_DBLCLICK event is captured.', [columnId, value, record]);
  });
  
  // Here, 'BENE_WGT' is the widget ID.

• Row Double Click event

  CWEH.registerHandler('BENE_WGT', CWEC.ROW_DBLCLICK, function(columnId, record, value)
  {
  	LOGGER.info('The ROW_DBLCLICK event is captured.', [columnId, record, value]);
  });
  
  // Here, 'BENE_WGT' is the widget ID.

Change Event

The Change event occurs when the value of an element is changed. For example, selecting or deselecting a checkbox or radio button. The Change event also raises the Cell Click and Row Click events.

For example, when you select and deselect the checkbox of a reference number on the Reference Number column of the Beneficiary Details widget, the Change event is triggered.

To achieve this you need to define the Change event attributes in the Column Template as follows:

<input 
	type = 'checkbox'
	data-input = "true"
	data-column-id = 'BENE_ID'
>
<!-- BENE_ID is the Reference Number column's ID. -->

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

• After selecting the checkbox:
  
  
  
  
• After deselecting the checkbox:
  
  

To capture actions through the Change event, use the event handler functions. For the Reference Number column, you need to capture the actions as follows:

CWEH.registerHandler(‘BENE_WGT’, CWEC.CELL_DATA_CHANGE, function(record, columnId, value)
{
	LOGGER.info('The CELL DATA CHANGE event is captured.', [record, columnId, value]);
});
// Here, 'BENE_WGT' is the widget ID.

Context Click Event

A Context Click event is raised when you right-click on a cell, column or row in the widget. For example, when you right-click on a cell of the Widget Activity Summary > Saved widget, a context menu with edit and delete option appears.

The following is a sample screenshot of the Widget Activity Summary > Saved widget with the context menu enabled.

To achieve this you need to define the context event attributes as follows:

<input
	type = 'text'
	data-context-click = "true"
	data-column-id = 'BENE_ID'
>
<!-- BENE_ID is the Reference Number column's ID. -->

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:

The template configuration code for the Reference Number column is as follows:

{{ #if tplData }}
	<input 
		data-input = 'true'
		type = 'text'
		value = {{ tplData }}
		data-column-id = 'BENE_ID'
		data-single-click = 'true'
		data-context-click = "true"
	>
{{ /if }}
<!-- BENE_ID is the Reference Number column's ID. -->

To capture actions through the Context Click event, use the event handler functions. For the Reference Number column, you need to capture the actions as follows:

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

// Here, 'WGT_DRAFT’ is the widget ID.