how to set width for each column evenly

[imre horvath]

Hi,

I have a simple spreadsheet, where I limited the column count to a certain number (in this example, let's say 7). Now, I want to set the width for each column evenly, so that there is no more spate between the last column and the end of the spreadsheet. 

The spreadsheet sits in a container with 'width: 100%'. So, I don't have a fix width of the spreadsheet. I saw, that the spreadsheet panel has it's width like this: 'calc(100% - 29.6px)'. Can I somehow use this to calculate the column width?

[Vasanth Ravi]

Hi Imre,

Thanks for contacting Syncfusion Support...!

We have prepared a sample that meets out your requirement. On the created event we have fetched the usedRange of the column and invoked an event listener to resize. On the listener function we have fetched the sheet width and adjusted the column width respective to the sheet width to the number of columns rendered.

Attached code block and sample for reference.

CODE BLOCK:

 

created() {

        // Get the used range of the sheet.

        let usedRange: UsedRangeModel = this.spreadsheetObj.sheets[0].usedRange;

        // To set the rowCount/colCount in the sheet model.

        this.spreadsheetObj.sheets[0].colCount = usedRange.colIndex;

        // To update height/width to of the rendered rows/columns.

        this.fitPage();

        // Update height/width while resizing.

        window.addEventListener('resize', this.fitPage);

    }

    fitPage() {

        // Fetch the client width of the sheet content.

        let sheetWidth: number =

            this.spreadsheetObj.element.querySelector('.e-sheet-content').clientWidth;

        // Get the used range of the sheet.

        let usedRange: UsedRangeModel = this.spreadsheetObj.sheets[0].usedRange;

        // Calculate the width to be updated for each column.

        let width: number = Math.floor(sheetWidth / usedRange.colIndex);

        // Set width to the rendered columns.

        this.spreadsheetObj.setColumnsWidth(width);

    }

 

Stackblitz Sample: https://stackblitz.com/edit/angular-u8g2rv-xt82gc?file=src%2Fapp.component.ts

Attached link for reference.

https://support.syncfusion.com/kb/article/13803/how-to-adjust-the-width-and-height-of-a-javascript-spreadsheet-based-on-the-number-of-rows-and-columns-rendered

Get back to us if you need any other further clarifications on this.