Removing the Black Frame of a Selected Cell by JS on the Data Analysis Page

Problem

During data analysis preview, a selected cell will be framed by a black border, which may affect the overall report appearance. So, how to remove this frame?

Implementation Method

• Method one: You can add a loading end event to the data analysis setting page, and use code to remove the frame.

• Method two: You can obtain the frame element after preview, and then use code to modify the frame effect. Similarly, you need to add a loading end event.

• Method three: Instead of removing the black frame that appears when a cell is selected, you can directly modify the border color to make the appearance more visually appealing.

Method One: Using the Frame Removing Code

1. Open the designer, select the template that needs to be edited, choose Template > Web Attribute > Data Analysis Setting, and add a Loading End event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

_g().curLGP.hideSelectFrame();

Method Two: Obtaining the Frame Element

1. On the report preview page in the data analysis preview mode, press F12 to select the cell and locate the element corresponding to the frame, as shown in the following figure.

2. Choose Template > Web Attribute > Data Analysis Setting, and add a Loading End event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

$('.fDright').removeClass('fDright'); 
$('.fDbottom').removeClass('fDbottom'); 
$('.fDtop').removeClass('fDtop'); 
$('.fDleft').removeClass('fDleft');

Method Three: Customizing the Frame Color

1. Customize the frame color for the cell, choose Template > Web Attribute > Data Analysis Setting, add a Loading End event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

$('.fDright').css('background', 'red'); 
$('.fDbottom').css('background', 'yellow');
$('.fDtop').css('background', 'blue'); 
$('.fDleft').css('background', 'gleen');

2. The following figure shows the preview effect.

For details, you can download the templates: Removing the Black Frame of a Selected Cell.cpt, Removing the Black Frame of a Selected Cell.cpt, and Customizing the Frame Color of a Selected Cell.cpt.