No border within a group

1. Expected effect

When designing grouped reports, you want the reports in the same group to have no borders, as shown in the following figure (original format on the left and demand format on the right)

2. Implementation ideas

Use conditional formatting or JS to control whether the group inner border is displayed or not.

1. Prepare the template

1) Create a new template, add data set DS1, SQL statement is 

SELECT Country,Region,City FROM Client

2) Drag the data into the corresponding cell. The template settings are as follows:

3) First, remove the upper and lower borders of C2 cell, and keep the left and right borders.

4) Select cell D2, set the left parent cell as B2, and write down the number of cumulative formula count (C2) + D2 [B2: - 1], and then hide column D.

Note: D2 [B2: - 1] means to obtain the value of D2 corresponding to the previous B2 cell.

2. Set the border

In Section II.1, the upper and lower borders of the C2 cell have been canceled, and the number of cells up to the last cell of each group has been recorded. Next, we need to pass this number and add the corresponding group border. That is, add a border to the first cell of each group or add a border to the last cell of each group.

There are two ways to implement the operation of adding borders, conditional attributes or adding JS implementation.

1) Conditional properties

Select C2 cell, and click conditional formatting > Add condition > attribute > border > Edit to add only the bottom right border, as shown in the following figure:

Select the formula for the formula condition, and add the formula as row () = D2 + 1, which means the last line in the group plus the bottom right border, as shown in the following figure:

2)  JS method implementation

Instead of using conditional attributes, it can also be achieved by adding JS events.

Select template > web attributes > Pagination Preview, select individually set for the template, and add the loading end event setting, as shown in the following figure:

$("[id^=D]").each(function(){  
    $("#r-"+$(this).text()+"-0").css("border-bottom","1px solid black");  
})

Note: the code means to find the row corresponding to the value in D2 cell and add the bottom border, where [id^=D] means to select column D cell.

3. Effect preview

1) PC terminal

Save the template, click the page preview, the effect is as shown below:

2 Mobile terminal

App and HTML5 effects are shown in the following figure:

Note: The JS implementation method does not support mobile terminals.

For completed templates, please refer to:

%fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\NoBorderCell.cpt

%fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\JSNoBorderCell.cpt

Click to download the template:

NoBorderCell.cpt

JSNoBorderCell.cpt