JS Hide Columns or Rows by Clicking a Button

1.1 Requirement

When performing data entry, how to hide certain rows and columns by using a button widget?

1.2 Solution

Hide rows and columns by using a button widget to add a Click Event.

Note

Export is not supported.

2.1 Create a new template

Create a new regular report as follows:

2.2 Set a button widget

Select A1 and click Widget. Set the Widget Type as Button Widget, the Button Type as Common, and the Button Name as Hide the second, third and fourth row, as shown below:

2.3 Add a Click Event

Select A1, click Widget>Event to add a Click Event, and input the JavaScript code, as shown below:

Input the JS code:

$("#r-1-0").toggle();
$("#r-2-0").toggle();
$("#r-3-0").toggle();
if (contentPane.curLGP.$editor) {
    contentPane.curLGP.$editor.toggle();
}

When there is more than one sheet in the template, input the following JavaScript code:

$("#r-1-0").toggle();
$("#r-2-0").toggle();
$("#r-3-0").toggle();
if (contentPane.curLGP.$editor) {
    contentPane.curLGP.$editor.toggle();
}

Note

In $("#r-1-0"), 0 represents the row where the Sheet is located (starting from row 0)

2.4 Preview

Save the template and click [Data Entry Preview]. The preview effect is shown as below:

3.1 Create a new template

Create a regular report as follows:

3.2 Set a button widget

Select A1 and click Widget. Set the Widget Type as Button Widget, the Button Type as Common, and the Button Name as Hide columns B and C, as shown below:

3.3 Add a Click event

Select A1, click Widget>Event to add a Click Event, and input the JavaScript code, as shown below:

Input the JS code:

$("td[id^='B']").toggle();//Hide column B 
$("td[id^='C']").toggle();//Hide column C

When there is more than one sheet in the template, input the following JavaScript code:

$("#B1-0-0").toggle();//Hide column B
$("#C1-0-0").toggle();//Hide column C

Note

In $("B1-0-0"), the first 0 represents the column where the sheet is located(starting from column 0).

3.4 Preview

Save the template and click [Data Entry Preview]. The preview effect is shown as below:

4.1 Sample 1

Hide Columns or Rows by Clicking a Button_1.cpt

4.2 Sample 2

Hide Columns or Rows by Clicking a Button_2.cpt