Bottom border is transparent

Posted by: ngocnguyen09910060 on 23 April 2023, 11:35 pm EST

  • Posted 23 April 2023, 11:35 pm EST - Updated 23 April 2023, 11:40 pm EST

    Hi teams,

    On my application:

    1. Set row count = 3:
    sheet.setRowCount(3);
    1. Merge row header of row 1, 2, 3:
    sheet.addSpan(0, 0, 3, 1, GC.Spread.Sheets.SheetArea.rowHeader);
    1. Hide row 3:
    sheet.setRowVisible(2, false);
    1. View SpreadJS on browser, we can see the default bottom border of row header => OK

    2. Change border color to green:

    var defaultStyle = new GC.Spread.Sheets.Style();
    			defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("red",GC.Spread.Sheets.LineStyle.medium);
    			defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("red",GC.Spread.Sheets.LineStyle.medium);
    			defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("red",GC.Spread.Sheets.LineStyle.medium);
    			defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("red",GC.Spread.Sheets.LineStyle.medium);
    			sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.rowHeader);


    6. View SpreadJS on browser, we can not see the red bottom border of row header => Not Good



    Please check my sample source code and tell me how to fix it.

    SpreadJS_Border.zip

  • Posted 24 April 2023, 11:28 pm EST

    Hello,

    Thank you for providing us the images of the issue.

    We were able to replicate the problem on our end. It seems that the bottom border is not applied when last row of the merged cell is hidden. Hence, we have escalated this issue to the concerned team for further investigation and resolution. The internal trackind id for this issue will be: SJS-18053. Please be rest assured that we will keep you updated as there is any progress on this issue.

    As a workaround, you can override the paint method of the GC.Spread.Sheets.CellTypes.RowHeader cell type class. You can draw the bottom border on the canvas when the last row of the merged cell is hidden.

    Please refer to the code snippet and attached sample for further understanding.

    if (span) {
        let spandLastRow = span.row + span.rowCount - 1;
        let lastRowVisible = sheet.getRowVisible(spandLastRow, GC.Spread.Sheets.SheetArea.rowHeader);
        let bottomBorder = style.borderBottom;
        if (!lastRowVisible && bottomBorder && spandLastRow === sheet.getRowCount() - 1) {
            ctx.beginPath();
            ctx.moveTo(x, y + h - 1);
            ctx.lineTo(x + w, y + h - 1);
            ctx.strokeStyle = bottomBorder.color;
            ctx.stroke();            
            ctx.closePath();
        }
    }

    Please let us know if you still face any issues.

    Doc references:

    RowHeader cell type class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.RowHeader

    RowHeader.paint(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.RowHeader#paint

    Regards,

    Ankit

  • Posted 25 April 2023, 6:10 pm EST

    Hi ankit.kumar,

    I understand your explaintation.

    Can you provide full sample source code to override the paint method of the GC.Spread.Sheets.CellTypes.RowHeader cell type class ?

    Thank you.

  • Posted 25 April 2023, 6:10 pm EST

    Hi ankit.kumar,

    I understand your explaintation.

    Can you provide full sample source code to override the paint method of the GC.Spread.Sheets.CellTypes.RowHeader cell type class ?

    Thank you.

  • Posted 25 April 2023, 7:10 pm EST

    Hi,

    Here is the sample in the discussion.

    Regards,

    Ankit

    Sample: SpreadJS_Border_modified.zip

  • Posted 26 April 2023, 2:41 pm EST

    Hello,

    We would like to inform you that the bottom border of merged cell is not shown when last row corresponding to last cell of merged cell is hidden. This behavior is by design.

    SpreadJS implements the same policy as MS Excel in rendering the border in a merged cell in the viewport. Header borders rendering policy is same as the viewport.

    Please refer to the attached excel file “border.xlsx” and hide row 15. Observe that after hiding row 15, the bottom border of the merged cell is not shown.

    As a workaround, you can add an additional row and set its height to 1. This, the bottom border of the merged cell in row header is shown when row 3 is hidden.

    sheet.setRowCount(4);
    //Set the default styles.
    var defaultStyle = new GC.Spread.Sheets.Style();
    defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.medium);
    sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.rowHeader);
    
    sheet.addSpan(0, 0, 3, 1, GC.Spread.Sheets.SheetArea.rowHeader);
    sheet.setRowVisible(2, false);
    sheet.setRowHeight(3, 1);

    Please let us know if you still face any issues.

    Doc reference

    sheet.setRowHeight(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#setrowheight

    Regards,

    Ankit

    Excel file: border.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels