1. Home
  2. Forum
  3. Vue
  4. Spreadsheet UI error

Spreadsheet UI error

I tried to show the UI problem with your Sample

  1. UI error in selecting cell
  2. I wanted to change the height of the browser, but the spreadsheet couldn't be
    3. filled 100% without refreshing the page
  3. The row height cannot be the same as the 'line number' column on the left side, especially when the number of rows is over 4000, the problem is caused by the Chinese characters. When fill in Chinese characters inside one cell, the whole row' height will be bigger than before. Currently we change the font size to '8' (which is the samllest), this can avoid this problem for now, but I think you may have a more elegant solution.


Chrome browser: Version 94.0.4606.81（Official Build） (arm64)


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-377809123


Attachment: spreadsheet.pdf_1864c2f4.zip


9 Replies
AS Aravinthan Seetharaman Syncfusion Team October 19, 2021 03:53 AM UTC

Hi kk, 
 
Thanks for contacting Syncfusion support, 
 
We have checked your query. We need to validate more on this and need to ensure more cases on this. So, we will update further details on 20th October 2021. We appreciate your patience until then. 
 
Regards, 
Aravinthan S 


KK kk replied to Aravinthan Seetharaman October 21, 2021 01:34 AM UTC

Where can I find more information and how can this problem be solved


AS Aravinthan Seetharaman Syncfusion Team October 21, 2021 06:07 AM UTC

Hi kk, 
 
Thanks for the patience. 
 
We have validated your query. 
 
Query1: UI error in selecting cell 
 
Ans: We have checked this query. We cannot able to reproduce your reported issue in our end. Please share the below details to proceed further. 
 
·         Please share us the issue replicating step. 
·         Please share us the video demonstration of this issue. 
 
Please share the above information for  
 
Query2: I wanted to change the height of the browser, but the spreadsheet couldn't be 
filled 100% without refreshing the page 
 
Ans: We have checked this query. We can able to achieve your requirement by using height property of the spreadsheet. Please refer the below code snippet. 
 
 
  created: function(){ 
    var spreadsheet = this.$refs.spreadsheet; 
    spreadsheet.height=document.documentElement.clientHeight-10; 
    window.addEventListener('resize', function () { 
          document.body.style.height = `${document.documentElement.clientHeight-10}px`; 
          spreadsheet.height = document.body.style.height; 
        }); 
  } 
 
 
 
Query: selection issue on Chinese characters inside cell 
 
Ans: We have checked this query. We would like to let you know that we have already logged bug report regarding selection issue while copy paste Chinese words in our Spreadsheet. And fix for this issue will be available on 27th October 2021 patch release. We appreciate your patience until then. Please track the status through below feedback link. 
 
 
Please let us know if you have any concern on this. 
 
Regards, 
Aravinthan S 


AS Aravinthan Seetharaman Syncfusion Team November 2, 2021 12:24 PM UTC

Hi Wang, 

Thanks for the patience. 
 
We are glad to announce that our weekly patch release (19.3.0.47) is rolled out. We have included the fix for your issue [selection issue on Chinese characters inside cell] in this release. So, we suggest you upgrade our Syncfusion packages to latest version to resolve this issue in your end. (19.3.0.47) 
  
In this, fix we have provided needHeightCheck property in the beforeCellRender event args. Using this we can set the required height for the cell contains Chinese characters. Please refer the below code snippet and sample. 
 
 
  beforeCellRander(args) { 
    var textContainsRowIdx = [1, 2, 3, 4, 5]; 
    if (textContainsRowIdx.indexOf(args.rowIndex) != -1) { 
      args.needHeightCheck = true; 
    } 
  } 
 
 
 
 
 
 
Regards, 
Aravinthan S



JS Janakiraman Sakthivel Syncfusion Team November 3, 2021 03:43 AM UTC

Hi kk, 
Thank you for your patience. 
We are glad to announce that our weekly patch release (19.3.47) is rolled out. We have included the fix for your issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (19.3.47). And we would like to let you know that we provided property "needHeightCheck" in beforeCellRender event. If your data contains any Chinese text, we suggest you set this property as true for your needed row index as shown below. 
Code Example:  
 
beforeCellRender: function (args) { 
    if (args.rowIndex  == 5000 || args.rowIndex  == 5001) 
      {  
        args.needHeightCheck = true; 
      } 
  } 
 
  
For your convenience, we have prepared the sample on your requirement. Please find the link below. 
 
 
Could you please check the above link and get back to us, if you need any further assistance on this.  
 
Regards,  
Janakiraman S.  


KK kk December 13, 2021 01:39 AM UTC

Hi

I run your "sample Link： https://www.syncfusion.com/downloads/support/forum/169692/ze/QU0811~1-787631859 " example, and the problem still exists。


JS Janakiraman Sakthivel Syncfusion Team December 13, 2021 10:31 AM UTC

Hi kk, 
 
We have checked your reported issue with sample in version (19.3.0.47) and our latest version (19.3.0.58) too, and it is working fine from our side in both versions. For your convenience, we have prepared the sample in the latest version and a video demonstration too. Please see the links below. 
 
 
 
Could you please check the above links and get back to us, if you need any further assistance on this.  
  
Regards,  
Janakiraman S.  


KK kk December 16, 2021 05:48 AM UTC

hi

I run your "sample Link：https://www.syncfusion.com/downloads/support/forum/169692/ze/QU0811~3-526940667 example, and the problem still exists

I guess this bug is related to computer chips。


TS Thaneegairaj Sankar Syncfusion Team December 22, 2021 12:19 PM UTC

 
We have checked your reported query in macOS Big Sur using virtual machine. We are unable to replicate the selection misalignment in your sample with latest package 19.4.38 and we have checked using Safari 14.1 browser. For your reference we have prepared a video demonstration, please find the below link 
 
 
Note: We have checked your image, in that hidden rows were not rendered properly in your side, could you please ensure on this. 
 
Could you please check the above details and get back to us, if you need any further assistance on this. 
 
Regards, 
Thaneegairaj S 


Loader.
Up arrow icon