Set colCount and rowCount after Spreadsheet has been created

[John]

I believe that you can specify the number of rows and column when you create a spreadsheet control, but can you alter the number of of rows/columns AFTER the spreadsheet is created and rendered?

I do not want any rows or column visible beyond the "used range". For example, I want to display a 8 row by 8 column spreadsheet, without the user being able to navigate outside of that range. Then, I may want to programmatically increase or decrease the rol/col count (e.g. expand to 10 x 10).

Can you please show me the proper javascript to create a 8x8 blank spreadsheet and the code to change the col/row count afterwards?

//Initialize Spreadsheet component.
var spreadsheet = new ej.spreadsheet.Spreadsheet({

height: 800,

sheets: [{

name: "MySheet",

rowCount: 10, //doesn't work now, it worked earlier, I thought

colCount: 10 }]

});

//Render initialized Spreadsheet component.

spreadsheet.appendTo('#spreadsheet');

function setColumnCount(n) {

spreadsheet.sheets[0].colCount = n; //doesn't work

};

JS2 - Javascript - 19.2.0.44

[John]

I think that I have found the solution:

   scrollSettings : { isFinite: true},

Placing this in the constructor seems to make everything work as expected.  

[Janakiraman Sakthivel]

  

Hi John, 

  

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we are able to set the colCount and rowCount after Spreadsheet has been created. 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: 

var spreadsheet = new ej.spreadsheet.Spreadsheet({ 

  sheets: [ 

    { 

      name: 'MySheet', 

      rowCount: 8, 

      colCount: 8 

    } 

  ], 

  scrollSettings: { isFinite: true } 

}); 

//Render initialized Spreadsheet component 

spreadsheet.appendTo('#spreadsheet'); 

button = new ej.buttons.Button({}); 

button.appendTo('#btn'); 

button.element.onclick = function() { 

  spreadsheet.sheets[0].colCount = 10; 

  spreadsheet.sheets[0].rowCount = 10; 

}; 

 

Please find the sample link below, 

 

https://stackblitz.com/edit/rowcolcount-tbagg9?file=index.js

 

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  

Please check the above sample and get back to us if you need further assistance. 

Regards,
Janakiraman S.