非表示設定後に行の縞模様を保持する

1. Problem description

If we set the interlaced color on the report (Different Row Background Color), and set the conditional formatting to hide the row height, the original interlaced color will look messy.

For example, the effect of interlaced color change after hiding the line with Shipper as 1 is as follows:

How to keep the interlaced discoloration after hiding the lines?

2. Solutions

Solution 1: Use the formula IF() when setting the background color. If the condition of the hidden line is satisfied, the hidden line will not perform the condition of interlaced color change, otherwise it will be performed.

Solution 2: Add the Loading end event in Template>Web Attributes>Pagination Preview, using JavaScript code to achieve.

1. Prepare template

Open the template:  Set the background color interlaced.cpt

2. Hidden rows

Select cell E2 and add a condition: when the carrier is equal to 1, the row height is 0. Select Row Height from the attribute, the condition type is Common, and the condition is set to Equal to String '1', and click Add when finished. The steps are shown in the figure below:

3. Scheme 1: Set the background color

Modify the formula in the Conditional Attributes> Background setting of cell A2 to: IF(E2!=1,SEQ()%2=0,FALSE)

4. Scheme 2: Add loading end event

1) After setting the hidden row, delete the original Conditional Formatting of cell A2.

2) Click the menu Template>Web Attributes>Pagination Preview, and select Individually set for the template. In the event settings at the bottom of the page, click the Add button, select the Loading end event, and enter the JavaScript code in the pop-up event setting dialog box as follows:

$(".x-table tr:visible").each(function(i) {
if (i % 2 == 0 && i >= 1) {
$(this).css("background-color", "#ccccfd");
}
});

Note: Among them, the 1 in i>=1 is obtained by subtracting 1 from the row number of the cell that started to change color.

The steps are shown in the figure below:

5. Effect preview

1） PC side

Save the report, click Pagination Preview, the effect is as shown in the figure below:

What should I do if I want to use JS events in the decision report to achieve the same effect?

1. Make a template

To create a new dashboard, drag a report block into the dashboard. The table design in the report block is consistent with the above template. And add the same conditional formatting to cell E2, and cell A2 does not set conditional formatting.

2. Add post-initialization event

Select the report block, click "Events" in the right panel, add the "After initialization" event, and enter the JavaScript code as follows:

setTimeout(function() {
	$(".x-table tr:visible").each(function(i) {
		if (i % 2 == 0 && i >= 1) {
			$(this).css("background-color", "#ccccfd");
		}
	});
}, 1000);

The steps are shown in the figure below:

3. Effect preview

Save the report, click PC preview, the effect is as shown: 

Note: Mobile terminal is not supported.

The completed template can be found in:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\FeaturesApplication\Interlace color change after

hidden line.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\FeaturesApplication\Interlace color change after 

hidden line-JS.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\FeaturesApplication\Interlace color change after hidden line-JS.frm

Click to download the template:

Interlace color change after hidden line.cpt

Interlace color change after hidden line-JS.cpt

Interlace color change after hidden line-JS.frm