Interlaced Color Change After Row Hiding

Problem

If you set the interlaced color change (setting the background color every other row/column) for a report, and set the conditional attribute to hide the row height for certain rows of the report, the effect of the interlaced color change may not be visually appealing. 

For example, the following figure shows the effect of the interlaced color change after the rows with 1 as the Shipper values are hidden.

How to retain the interlaced color change effect after the row hiding?

Solution

Method one: You can use the IF() formula when setting the background color to set the hidden rows not to be involved in the interlaced color change operation.

Method two: You can add a Loading End event under Template > Web Attribute > Pagination Preview Setting to achieve the effect by JavaScript code. 

Template Preparation

Open the template Interlaced Color Change After Row Hiding in %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Interlaced Color Change After Row Hiding.cpt.

Row Hiding

Select cell E2, and add the condition to set the row height to 0 when the Shipper value equals to 1. Select Row Height from the drop-down list of Attribute, select Common as Type, set the condition Equal to 1 (String), and click Add. The following figure shows the steps.

Method One: Setting the Background Color

Select cell A2, choose Condition Attribute > Background, and modify the formula to IF(E2!=1,SEQ()%2=0,FALSE).

Method Two: Loading End Event Adding

1. Delete the former condition attribute of cell A2 after the row hiding setting.

2. Choose Template > Web Attribute > Pagination Preview Setting, and select Set for This Template Separately in Following Settings. Click the Add icon at the bottom of the page, select Loading End, and enter the following JavaScript code in the pop-up event setting dialog box.

$(".x-table tr:visible").each(function(i) {

if (i % 2 == 0 && i >= 1) {

$(this).css("background-color", "#ccccfd");

}

});

Note: 

In the code, 1 refers to the result of subtracting one from the row number of the row where the cell starting to change color is located. 

The following figure shows the steps.

Effect Display

PC 

Save the report and click Pagination Preview. The following figure shows the preview effect.

Mobile Terminal

Note that adding the Loading End event mentioned in method two is not supported on mobile terminals, and the method one operation is supported on both APP and H5 terminals. The following figure shows the effect.

How to achieve the same effect in FRM reports by JS events?

Note: 

This method only applies to the FRM report of the old version instead of the FRM report of the new version. 

Template Creation

Create an FRM report, drag a report block into the report, and design the table in the report block as shown in the above template. Add the condition attribute mentioned above to cell E2, and do not set the condition attribute for cell A2.

After Initialization Event Adding

Select the report block, click Event on the right attribute panel, add an After Editing event, and enter the following JavaScript code:

setTimeout(function() {

$(".x-table tr:visible").each(function(i) {

if (i % 2 == 0 && i >= 1) {

$(this).css("background-color", "ccccfd");

}

});

}, 1000);

The following figure shows the steps.

Effect Display

Save the report and click Pagination Preview. The following figure shows the preview effect.

Note: 

The effect cannot be previewed on mobile terminals. 

For details, you can download the templates:

Interlaced Background Color Change After Row Hiding.cpt

 Interlaced Background Color Change After Row Hiding-JS.cpt

Interlaced Background Color Change After Row Hiding-JS.frm