autoFitColumns causes columns to shrink and not take available width

[Joseph]

Hi Syncfusion Support/Community,

I would like to be able to have my cell content within the grids expand to take up all available width if there are too few columns to take up all width when using autoFitColumns() on the databound event of the grid.

I have provided an example below where calling autoFitColumns will cause the cells to shrink to only take up the cell content's width. I am aware removing autoFitColumns then gives the behaviour I would like (spreading evenly across all columns), however our tables can have few columns or many columns and so ensuring that the cells content is always visible is important.

This example shows not taking up all available column width:
https://stackblitz.com/edit/ekppqq-ww6mnu?file=index.ts

Removing autoFitColumns for a small column count gives desired effect..:

However adding too many columns with autoFitColumns causes problems..:

In this instance I would prefer to not autoFitColumns, how might one accomplish this?

Many thanks,
Joseph

[Sujith Kumar Rajkumar]

Hi Joseph, 

Greetings from Syncfusion support. 

The auto fit columns are calculated based on the column’s maximum header/content width and the grid’s total width. That is why on calling auto fit columns when the grid has less number of columns they are adjusted as in the provided screenshot. Likewise if there are more number of columns the columns width is calculated in the same manner. In the image you had attached we could see that the grid has a small width and so the first four columns are adjusted based on the cell content and since there are more columns that need to be rendered they are adjusted based on the remaining grid width. So if you wish to auto fit the columns when there are more number of columns then you would need to set the width to the Grid based on the columns so that scroller would be rendered while the auto fit columns are called. You can skip calling the auto fit columns method if there are less number of columns. 

grid.dataBound = () => { 

        if (grid.columns.length > 6) { 

            grid.autoFitColumns(); 

        } 

} 

We have prepared a sample based on this for your reference which you can find below, 

 

Sample: https://stackblitz.com/edit/ekppqq-xjdxsx?file=index.ts 

If you need to auto fit the columns without increasing the grid width, then you need to dynamically set width for each column(calculated based on the grid width) using its width property and then refresh the columns. 

If we misunderstood your query or if you require any further assistance please get back to us. 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Tor Thorbergsen]

I have a similar problem, I have a few columns that I would like to autofit, and I have one column that I would like to take the remaining space.
Is this possible?
I have set the big columns width to 100%, and explicitly name the columns to autofit, but when autofitting the grid seems to ignore the 100% on the column I want to be big. Is there a way I can give that column the 100% after autofitting?

[Rajapandiyan Settu]

Hi Tor,

Thanks for contacting Syncfusion support.

Query: I have a few columns that I would like to autofit, and I have one column that I would like to take the remaining space.

Based on your requirement you want to autofit only particular columns in the Grid. You can achieve this by passing the column fields in the autoFitColumns method.

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#dataBound
autoFit specific columns: https://ej2.syncfusion.com/javascript/documentation/grid/columns/auto-fit-columns/

Also, you want one column to adapt the remaining white space in the Grid. You can achieve this by setting the column width as auto and minWidth in the column settings.

 

[index.js]

var grid = new ej.grids.Grid({

  dataSource: data,

  columns: [

    {

      field: 'OrderID',

      headerText: 'Order ID',

      width: 120,

      textAlign: 'Right',

    },

    {

      field: 'CustomerName',

      headerText: 'Customer Name Detailsss',

      width: 150,

    },

    { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },

    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },

    {

      field: 'ShipAddress',

      headerText: 'Ship Address',

      minWidth: '200',

      width: 'auto',

    },

  ],

  dataBound: dataBound,

});

grid.appendTo('#Grid');

 

function dataBound(args) {

  // adjust the columns based on minwidth

  var tgridWidth = this.widthService.getTableWidth(this.getColumns());

  this.widthService.setMinwidthBycalculation(tgridWidth);

  // autofit all the columns except the auto width column (ShipAddress)

  this.autoFitColumns(['OrderID', 'CustomerName', 'Freight', 'ShipCountry']);

}

 

sample: https://stackblitz.com/edit/davn41-cegvdr?file=index.js

Please get back to us if you need further assistance.

Regards, 

Rajapandiyan S