JS Edit widget on click once

1.1 Problem

When there are many widgets in one report, to enhance performance, sometimes we will not display the widget directly. In this way, by default, you need to double-click the cell to enter the edit mode, which is cumbersome and sometimes may cause error when the input is Chineses, Korean, etc.              

So how to automatically enter the editing state after selecting a cell once, as shown below:

1.2 Solution

1）Solution 1

Use the contentPane.on event to monitor the cell selection event, and set the editing event for the selected cell.

2） Solution 2

Use the setEditOnClick() and setEditOnMove() provided by contentPane to set whether to edit directly when clicking to select a cell or pressing the Tab key to move the cursor.    

2.1 Solution 1

Add a loading end event to the template, as shown below:

JavaScript:

//Monitor cell selection
contentPane.on('cellselect',function(td){
//Call edit event on selected cell
contentPane.curLGP.editTDCell(td);
})

Note: This method is suitable for direct mouse selection or Tab key selection.

2.2 Solution 2

Add a loading end event to the template, as shown below:

JavaScript:

//Edit on click
contentPane.setEditOnClick(true);
//Edit when cursor is moved using Tab key
contentPane.setEditOnMove(true);

2.3 Summary

Both of the above two methods can directly display the widget and enter edit mode, which improves the usability of our report and a better interactive experience.

Method one can be used in conjunction with other codes, such as custom add and delete row buttons or JS to remove the red triangle in the upper left corner of the report.

Method two is simpler and more intuitive, but you must add all two lines of code when using it.

2.4 Preview effect

Save the template, select the data entry preview , and the effect is shown in the following figure:

3.1 Solution 1

1.cpt

3.2 Solution 2

2.cpt