spreadsheet border broken

I made the following result by coding on a spreadsheet.
However, what you see on the screen is slightly different from the actual data.
Each time you scroll up and down, the value of border changes little by little.


this picture is vue spreadsheet with broken border




this picture Excel screen output as actual saveurl



Add to

The cellModel is thought to be as follows, so I coded it as a structure below and made the result like the picture above.

interface cellStyle {

    textAlign?: 'left' | 'right' // this.sht.cellFormat({'textAlign': 'Left'}, 'A$3')

    verticalAlign?: 'top' | 'bottom'

    borderLeft?: string // this.sht.cellFormat({'borderLeft': '2px solid #14522B'}, 'A$3')

    borderRight?: string // this.sht.cellFormat({'borderRight': '2px solid #14522B'}, 'A$3')

    borderBottom?: string // this.sht.cellFormat({'borderBottom': '2px solid #14522B'}, 'A$3')

    borderTop?: string // this.sht.cellFormat({'borderTop': '2px solid #14522B'}, 'A$3')

    backgroundColor?: string // this.sht.cellFormat({'backgroundColor': '#14522B'}, 'A$3')

    color?: string // this.sht.cellFormat({'color': '#2B2B2B'}, 'A$3')

    fontFamily?: string // this.sht.cellFormat({'fontFamily': '돋움'}, 'A$3')

    fontSize?: string // this.sht.cellFormat({'fontSize': '15pt'}, 'A$3')

    fontStyle?: 'italic' | '' // this.sht.cellFormat({'fontStyle': 'italic'}, 'A$3')

    fontWeight?: 'bold' | '' // // this.sht.cellFormat({'fontWeight': 'bold'}, 'A$3')

    textDecoration?: 'underline' | ''// this.sht.cellFormat({'textDecoration': 'underline'}, 'A$3')

}

interface cell {

    value?: string // this.sht.updateCell({value: '1'}, 'A$1')

    formula?: string // this.sht.updateCell({formula: '=SUM(1, 1)'}, 'A$1')

    hyperlink?: string // this.sht.updateCell({hyperlink: 'www.naver.com'}, 'A$1')

    wrap?: boolean // this.sht.updateCell({wrap: true}, 'A$1')

    colSpan?: number // this.sht.updateCell({colSpan: 2}, 'A$1')

    rowSpan?: number // this.sht.updateCell({rowSpan: 2}, 'A$1')

    style?: cellStyle

}

what'worng??


8 Replies

VR Vasanth Ravi Syncfusion Team September 14, 2022 03:48 PM UTC

Hi Leeheejae,


We have been checking your reported issue and we were facing complexity while validating it in the sample. We will update you further details on September – 16th, 2022.


We appreciate your patience until then.


Regards,

Vasanth R



VR Vasanth Ravi Syncfusion Team September 15, 2022 02:38 PM UTC

Hi Leeheejae,


We need some details from your side to proceed further. Please address the below requirements.


  1. What’s the version of the platform you were noticed the issue – whether vue 2.x or vue 3.x.?

  2. If possible , kindly share the issue replicable ( online (or) Local ) sample to validate it. It would be more useful to check your reported issue.


Kindly get back to us with the above requested details to proceed further.


Regards,

Vasanth R



LE leeheejae replied to Vasanth Ravi September 16, 2022 05:28 AM UTC

i use vue 2.6.14

and my inset code

Also, the generated Excel

openUrl: When loaded as 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', it is loaded normally.

But I can't use openUrl because I have to use it in an environment without internet.

=============================================================================

add txt file


Attachment: localhost1663304076371_c4c93872.zip


VR Vasanth Ravi Syncfusion Team September 18, 2022 04:44 PM UTC

Hi Leeheejae,


We need to validate more on the snippet provided, so we will update you the further details on September – 20th, 2022. We appreciate your patience until then.


Regards,         

Vasanth R



VR Vasanth Ravi Syncfusion Team September 20, 2022 02:15 PM UTC

Hi Leeheejae,


We have prepared the sample with the help of the snippets provided by you and we didn’t notice any issues as you mentioned on border. So, we kindly request you to replicate the issue in the below attached sample to provide better solution regarding.


Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_border-1943081423.zip


Get back to us with the above requested sample or if you need further assistance regarding.


Regards,

Vasanth R



LE leeheejae September 30, 2022 11:00 AM UTC

i found out


Border breakage is found in merge cells

example)

style1 = {

  1. backgroundColor: "#FFFFCC"
  2. borderBottom: "1px solid black"
  3. borderLeft: "1px solid black"
  4. borderRight: "1px solid black"
  5. borderTop: "1px solid black"
  6. fontFamily: "Tahoma"
  7. fontSize: "8pt"
  8. textAlign: "center"
  9. verticalAlign: "middle"

}


style2 = {

borderBottom": "1px solid #000000",

"borderLeft": "1px solid #000000",

"borderRight": "1px solid #000000",

"borderTop": "1px solid #000000",

"fontFamily": "Tahoma",

"fontSize": "8pt",

"fontWeight": "Bold",

"textAlign": "Center",

"verticalAlign": "Middle"

}

Q1)

Maybe like style1 and style2

Is there a difference in the case of the first letter?

Also #000000 === black ?


Q2)

And is the order important?

merge -> write cell value -> cell format

merge -> cell format -> write cell value


Q3)

If A1:B1 is merged

updateCell({value: 'new value'}, 'A1')

updateCell({value: 'new value'}, 'A1:B1')

Doesn't both matter?


In addition, I wish there was a function to load xlsx from local ( no internet )


Attachment: sample_57e20d74.zip



VR Vasanth Ravi Syncfusion Team October 3, 2022 03:49 PM UTC

Hi Leeheejae,


We are validating your sample and will update you further on October – 05th , 2022. We appreciate your patience until then.


Regards,

Vasanth R



VR Vasanth Ravi Syncfusion Team October 6, 2022 03:23 PM UTC

Hi Leeheejae,


We have checked your query and glad to answer your questions.


Q1. Maybe like style1 and style2

Is there a difference in the case of the first letter?

Also #000000 === black ?


Casing is necessary on declaring a variable. Here on the provided snippet on style2 you have declared the style parameter enclosing with “ ”. This makes the parameter to act as a string. We hereby attach the proper declaration.

 

CODE SNIPPET:

 

let style1 = {


        backgroundColor: "#FFFFCC",

        borderBottom: "1px solid black",

        borderLeft: "1px solid black",

        borderRight: "1px solid black",

        borderTop: "1px solid black",

        fontFamily: "Tahoma",

        fontSize: "8pt",

        textAlign: "center",

        verticalAlign: "middle"


    }

        

    let style2 = {

        

        borderBottom: "1px solid #000000",

        borderLeft: "1px solid #000000",

        borderRight: "1px solid #000000",

        borderTop: "1px solid #000000",

        fontFamily: "Tahoma",

        fontSize: "8pt",

        fontWeight: "Bold",

        textAlign: "Center",

        verticalAlign: "Middle"


    }

 

 

And the hex code #000000 refers to Black.

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


Q2. And is the order important?

merge -> write cell value -> cell format

merge -> cell format -> write cell value


Order of updating the cell model is not an issue. You can use any of the above-mentioned order to perform merge, update, and format on a cell at any point of time.


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 


Q3. If A1:B1 is merged

updateCell({value: 'new value'}, 'A1')

updateCell({value: 'new value'}, 'A1:B1')

Doesn't both matter?


As instructed above even you merge the cells you can update the data into the cell through the particular cell address or by providing the range of the merged cells.

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

Function to load xlsx from local 

 

You can use the local service to achieve your requirement. For more details do refer the attached kb.

 

https://www.syncfusion.com/kb/13200/how-to-remove-trial-version-tab-created-in-spreadsheet

 

Kindly get back to us if you need further assistance regarding.

 

Regards,

Vasanth R


Loader.
Up arrow icon