Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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.

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

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 the Cell Click and the Row Click events to function, the attribute data-single-click = "true" must be defined. As we are configuring the template for a column, we need to define the attribute data-column-id = '<Column ID>' as well.

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 click event is triggered', [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('fired ROW_CLICK', [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 the Cell Double Click and the Row Double Click events to function, the attribute data-single-click = "true" must be defined. As we are configuring the template for a column, we need to define the attribute data-column-id = '<Column ID>' as well.




  • No labels