How to restrict the maximum columns/rows.

Question

I have a spreadsheet with a fixed number of rows and columns. How can I make the spreadsheet show just that range of cells? Currently the scroll bars reflect the rows and columns the user COULD move to rather than just the rows and columns I want the user to actually work on. They can also click on cells outside of that area, which for what I am using it for, looks a bi

Sangeetha Priya Murugan · Answer

Hi Jeff, Thank you for contacting Syncfusion support. We have checked your reported requirement and we are able to set the maximum display range in spreadsheet. By setting the isFinite property as true in scrollSettings and set rowCount/colCount properties in sheet property as like in the below code example. Code Example:

scrollSettings: { isFinite: true, enableVirtualization: false, }, Please find the sample link below. https://codesandbox.io/s/laughing-satoshi-8x2k4?file=/src/App.vue Note: If you don’t need of empty space at the right, you need to set the width of the spreadsheet based on the total column width. Spreadsheet control rendered based on the width/height of the element div. API Link: https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#width Could you please check the above sample and get back to us, if you need any further assistance on this. Regards, Sangeetha M

Jeff Butterworth · Answer

Works great. Thanks very much

Jeff Butterworth · Answer

Actually I take that back. If I do it as per your example, yes it works great.

However, I can't bind it properly.

<e-sheet name="Shipment Details" :rowCount="rowCount" colCount="colCount">

This works on the initial values of rowCount and colCount. But when I get my datasource, I want to set those values based on the rows and columns I have in the data. But if I change those values in code, the spreadsheet doesn't update.

Same thing if I set in code:

spreadsheetInstance.sheets[0].rowCount = (1 + self.listData.length);

I have to call refresh() on the spreadsheet but then that causes its own issues. refresh() seems to ignore my column widths and does an autofit. When you click in the cells they are the right size but they don't display correctly.

So basically at the moment, I don't have a working solution.

I am using 19.1.57 so not sure if these issues have been fixed in newer versions. I can't go to newer version because of https://www.syncfusion.com/forums/166801/broken-version-when-upgrading

Sangeetha Priya Murugan · Answer

Hi Jeff, 
 
Thank you for your update. 
 
We have checked your reported issue and we would let you know that rowCount and colCount works properly in a dynamic update. For your convenience we have prepared the sample, that set rowCount (20) on initial loading and again set the rowCount (50) in created event. And the spreadsheet rendered with the updated rowCount without any error. Please find the link below. 
 
Sample Link: https://codesandbox.io/s/laughing-satoshi-8x2k4?file=/src/App.vue  
 
Could you please check the above link and replicate your issue in the above sample and send back to us, based on that we will check and provide a better solution quickly. 
 
Regards, 
Sangeetha M

Jeff Butterworth · Answer

Had a look at your example and can see that it works. However, same thing not quite working in my code. I have to add:

            setTimeout(function () {

spreadsheet.refresh();

}, 50);

then everything works fine.

I was on an older version where the refresh wasn't working properly (had issues with using latest version which another helpful person at SyncFusion helped with) but with the latest version the refresh now seems to work ok.

Thanks

Jeff

Sangeetha Priya Murugan · Answer

Hi Jeff, 
 
Thank you for your update. 
 
We have checked your reported issue and as we have stated before, please replicate your reported issue in our previously updated sample. We have created the sample in your provided version (19.1.57).  And the rowCount updated properly in our end, so please replicate your issue in our previously updated sample. Based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M