Versions Compared

Version Old Version 4 New Version Current
Changes made by

Ravikumar Babu CTOO (Unlicensed)

Lakshminarayanan1 S CTOO (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Note

You must define the events for the Row Template in the template file and capture the related actions in the JavaScript file for your application.

The Row Template supports the following events:


Note

Whether you define a cell click, row click, cell double click, row double click, change or a context click event, the data that is returned will be:

  • Column ID
  • Template configuration (cell value)
  • Current row data


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.

Note

For the Cell Click and Row Click events to function, the attribute data-single-click = "true" must be defined. As we are configuring the template for a row, we need to define the attributes data-item-id = "ct-tpl-record" and data-row-index = "{{index}}" as well.

...

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
    languagejs
    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
    languagejs
    CWEH.registerHandler('WGT_DEPOSIT_SUMMARY’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 event

    Code Block
    languagejs
    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
    languagejs
    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.


...

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

...

Code Block
languagejs
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’SUMMARY' is the widget ID.