Force not correct cell.

[Duc]

Hello team,

I am building a project about Spreadsheet, using Syncfusion Spreadsheet React.

I have a problem when I split the screen into 2 parts. 1 part displays the content, and 1 part displays the spreadsheet. The spreadsheet is on the right-hand side. When I double-click on a cell ('B1'), the spreadsheet does not focus on the right cell.

Before double-click

After double-click

So, is there any way to stop force when I double-click in the cell? Maybe a parameter that controls the force cell when double-clicking.

That is my project test

Thanks,

[Vasanth Ravi]

Hi Duc,

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

Regards,

Vasanth R

[Duc]

Hi, 

Is my problem solved yet?

Thanks.

[Vasanth Ravi]

Hi Duc,

 

We have checked your reported issue and we have two suggestions to be addressed. 

CASE 01:

As we noticed that you have used  gridTemplateColumns: "repeat(2, 1fr)" the page takes the mentioned length with the frame and made the focus accordingly while double clicking. To overcome this, you can set the width of the spreadsheet component as follow.

 

function App() {

  return (

    <div className="App">

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", }}>

        <div style={{width: "500px"}}>Column 1</div>

        <div style={{width: "750px", right: "0px"}}><SpreadsheetComponent/></div>

        </div>

    </div>

  );

}

 

CASE 02:

Instead changing the width of the spreadsheet, you can adjust the length of the grid template as 1 instead 2. So, that the length of the page template meant for the component alone.

 

function App() {

  return (

    <div className="App">

      <div style={{ display: "grid", gridTemplateColumns: "repeat(1, 1fr)", }}>

        <div style={{width: "500px"}}>Column 1</div>

        <div style={{width: "750px", right: "0px"}}><SpreadsheetComponent/></div>

        </div>

    </div>

  );

}

 

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

 

Regards,

Vasanth R

Attachment: Attachment_7f17742d.zip

[Kevin James]

I have learned this issues how to fix it thanks.

[Sangeetha Priya Murugan]

Hi Kevin,

Thank you for your update.Please get back to us, if you need any further assistance on this.

Regards,

Sangeetha M

[Duc]

Hello,

Thanks for your help so much, I tried to build your attachment and test case 01, and 02 code. But it did not force correct the cell where the cell is doubled click. Ex: I double-click B2, and the excel jumps to E2, not B2. i have to set the excel to the right size for my project. 

Here is a video that I recorded building your attachment. I tested on Chrome but I got the same error.
Can you check it again?

Thanks, 

[Vasanth Ravi]

Hi Duc,

We have seen your recorded video and checked the sample at our end, and it seems to be working fine. We hereby attach the sample and a video that demonstrate the working progress of the sample at our end. Kindly refer to it.

Attachment Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FORUMA~1-1261126321.zip

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

Regards,

Vasanth R

[Duc]

Hi Vasanth Ravi, 

Thanks for your recorded video. I found out the error lies in the aspect ratio. Everything works fine when I change the screen ratio to 150% (same as yours). But when I change the scale to 125% and 100% it no longer works properly. My screen is about 22 inches. 

Here is my recorded video: https://youtu.be/7Jyyw3wmDXM 

Regards, 

Duc

[Duc]

Hi Vasanth Ravi, 

I discovered the problem was that if the table was more than half the rest of the screen, it would have that problem.

Here is my recorded video: https://youtu.be/xXydGgelLGY 

Thank you for your help. 

Regards,

[Vasanth Ravi]

Hi Duc,

You’re welcome. Kindly get back to us if you need further assistance regarding.

Regards,

Vasanth R

[Duc]

Hi Vasanth Ravi, 

Looks like you don't understand what I mean. Please double-check the 2 errors I mentioned above. I think it is bug of Syncfusion. 

Regards,

Duc

[Vasanth Ravi]

Hi Duc,

We have been checking your issue with the provided video at our side. We need some more time to validate it and to provide better solution regarding. So, we will update you further details on October – 17, 2022.

We appreciate your patience until then.

Regards,

Vasanth R

[Duc]

Hi Ravi, 

Thank you for your help. Do you have a solution? I look forward to it. 

Best, 

Duc

[Vasanth Ravi]

Hi Duc,

We have checked your provided video and the issue you have mentioned. Based on that we have prepared the sample by changing the CSS property of the <div> rendered. We hereby attach the sample and a video that demonstrates the working progress of the mentioned resolution. Also provided a referral link for gridTemplate regarding CSS functionality. Please do refer to it.

CODE BLOCK:

 

<div id='forceCell'> …………  </div>

//  CSS

 

#forceCell

{

  display: grid;

  grid-template-columns: 500px minmax(200px, 5625%);

}

 

Grid Template Columns : https://css-tricks.com/almanac/properties/g/grid-template-columns/

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

NOTE: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.

Regards,

Vasanth R

Attachment: 177880_Attachment_ceb9c119.zip

[Duc]

Hi, 

I change it up to 1000px. it is not work.

#forceCell{
  display: grid;
  grid-template-columns: 1000px minmax(200px, 5625%);
}

Can you setup like this, and test it?

P/s:  If your solution is helpful, I will mark it as an answer. I appreciate your efforts to help.

Thanks, 

Duc 

[Vasanth Ravi]

Hi Duc,

We are working on your issue as per the provided information. We noticed some issues while rendering the component in the mentioned dimensions. We were working on to resolve it.

We will update you  further in October – 24, 2022. We appreciate your patience until then.

Regards,

Vasanth R

[Duc]

Hi  Vasanth Ravi, 

Thank you for your help, are you done? 

Regards, 

Duc

[Vasanth Ravi]

Hi Duc,

We have prepared sample by adding some CSS properties to the component and checked with the informed resolution (100% resolution). Hereby we attach the sample for your kind reference. Please do refer to it and get back to us if you need further assistance regarding.

Regards,

Vasanth R

Attachment: force_cell_8248d031.zip

[Duc]

Hi Vasanth Ravi,

Thank you for your help but it is still not working. Because its size is less than 1/2 the screen size, your table will focus no correctly. My design makes the table in 1/2 right screen, which means the table's size will be less than 1/2 the screen size.  So, is there a parameter for stopping the focus cell when double-click? I think that will be a solution.

Regards,

Duc

[Vasanth Ravi]

Sorry for the delay, Duc.

Currently, we are analyzing your query and will share the details with you within 2 business days.

[Padmini Ramamurthy]

Hi Duc,

For this inquiry, a ticket has been created under your account. For more updates, kindly follow that.

Regards,

Padmini