How to make grid column width not auto stretch

[lorryl]

Hi

I set the column's width, minWidth and maxWidth, but not work. The grid column width stretch auto.

I don't want this auto stretch style:

I want this style:

Whether there is an attribute that does not allow the column width to be automatically stretched, but is displayed strictly according to the width I set.

Can you help me?

[Praveenkumar Gajendiran]

Hi Lorryl,

Greetings from Syncfusion support.

From the provided information we could see that you are using the columns minWidth and maxWidth for column settings. By default, we have used this minWidth and maxWidth properties only for the Grid resizing feature. The minWidth and maxWidth column properties are used for restricting the column resize functionality between the specified minimum and maximum width respectively. It does not set minimum and maximum width for the column itself while initial rendering. 

By default, the columns width is automatically adjusted based on the Grid width . For example, if you set Grid width as 600px and total columns width as 200px (for two columns). The columns automatically adjust the width and render with 600px. This is default behavior table. 

If you want to fit the column width based on its content value , then we suggest you to use ‘autoFitColumns’ feature. This method resizes the columns to fit the widest cell’s content without wrapping. If the provided content placed within the columns width, then this feature fit the columns based on the provided width. So please check whether this feature is helpful.

AutoFitColumns Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns 

Currently , when we auto-fit/resize the columns its width will be taken as per the content of the column or according to the resize respectively and the rest of the grid width will be shown as empty space at the end of the last column. But, we have already logged a feature request for this as – “Column auto width feature that shares the remaining spaces among other columns on resize” from our end. This feature will be included in our 2020  Volume 3 release. 

You can track the current status of this request, review the proposed resolution timeline, and contact us for any further inquiries through the following link,      

       

Feedback: https://www.syncfusion.com/feedback/14176/provide-support-for-columnautowidth-in-ej2-grid    

 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[lorryl]

Hi,

I see the feedback is completed.

I upgrade the syncfusion version. I don't know how to show the picture style that's what I want.

The resizeSettings's mode default is "normal" ?  I setting it not working.

[Praveenkumar Gajendiran]

Hi Lorryl,

Thanks for your update.

Based on your query you want to fit the column width based on its content value and dose not columns to be adjusted to fit the remaining space. For this we suggest you to use ‘autoFitColumns’ feature and set the mode as Normal in the resizeSettings property.  

AutoFitColumns method resizes the columns to fit the widest cell’s content without wrapping. If the provided content placed within the columns width, then this feature fit the columns based on the provided width.  

When you set mode as Normal the columns will not be adjusted to fit the remaining space. For your convenience we have attached the sample so please refer the sample and screenshot for your reference. 

 

Screenshot: 

 

Code Example: 

export class AppComponent { 

  @ViewChild("grid") public grid: GridComponent; 

  public data: Object[]; 

  public resizeSettings = { mode: "Normal" };   

  ngOnInit(): void { 

    this.data = orderDetails.slice(0, 18); 

  } 

  dataBound() { 

    this.grid.autoFitColumns([]);   // autoFitColumns method to autofit all the columns 

  } 

} 

Sample: https://stackblitz.com/edit/angular-6dpbdp?file=app.component.ts

If  you want to remove the white space shown at the end of the columns after autofit all the columns. You can set the mode as Auto in the resizeSettings property to avoid the white space at the end of the last column. 

When you set mode as Auto the column width will be adjusted by other columns automatically. For your convenience we have attached the sample so please refer the sample and screenshot for your reference. 

Screenshot: 

 

Code Example: 

export class AppComponent { 

  @ViewChild("grid") public grid: GridComponent; 

  public data: Object[]; 

  public resizeSettings = { mode: "Auto" };   

  ngOnInit(): void { 

    this.data = orderDetails.slice(0, 18); 

  } 

  dataBound() { 

    this.grid.autoFitColumns([]);   // autoFitColumns method to autofit all the columns 

  } 

} 

Sample: https://stackblitz.com/edit/angular-6dpbdp-4ww9ag?file=app.component.ts 

AutoFitColumns Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns 

API Link: https://ej2.syncfusion.com/react/documentation/api/grid/resizeSettingsModel/#mode 

The above solution is not meet your requirement. Could you please explain your requirement briefly.  

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G. 

[lorryl]

Hi,

I will save the grid columns width to database when leave the page, and I will restore the grid columns width when enter the page next time.

So I cannot use the auto fit.

What should I do? Your grid always stretch auto when few columns.

Do you understand ?

[Praveenkumar Gajendiran]

Hi Lorryl,

Thanks for your update.

Based on your query, we suspect that your requirement is to set the stored/saved width values to the grid columns while load the page again. For this we suggest you to use the below way to achieve your requirement,

In the below sample, we have used a dataBound and resizeStop event of Grid to store the column width. Then set the stored column width values to the Grid columns by using load event of Grid when reloading the page  as demonstrated in the below code example. 

<ejs-grid 

    #grid 

    [dataSource]="data" 

    allowResizing="true" 

    height="400" 

    (load)="load($event)" 

    (dataBound)="dataBound()" 

    (resizeStop)="resizeStop($event)" 

 

  > 

    <e-columns> 

…….. 

    </e-columns> 

  </ejs-grid> 

export class AppComponent { 

  @ViewChild("grid") public grid: GridComponent; 

  public data: Object[]; 

  public a: Object = {}; 

  public flag: Boolean = true; 

  ngOnInit(): void { 

    this.data = orderDetails; 

  } 

  dataBound() { //dataBound event 

    if (this.flag) { // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only at initial. 

      var columns = this.grid.columns; 

      for (var i = 0; i < columns.length; i++) { 

        this.a[(columns[i] as any).field] = (columns[i] as any).width;  

      } 

      window.localStorage.setItem("columnWidth", JSON.stringify(this.a)); // we store the grid columns width in the window localStorage at initial rendering 

      this.flag = false; 

    } 

  } 

  resizeStop(args) { // column resize stop event 

// we update and store the grid columns width in the window localStorage while column resizing 

    this.a[args.column.field] = args.column.width; 

    window.localStorage.setItem("columnWidth", JSON.stringify(this.a));  

 

  } 

  load() { //load event 

    var dataBase = JSON.parse(window.localStorage.getItem("columnWidth")); // we get the stored/saved columns width value form the localStorage 

    if (dataBase) { 

      var columns = this.grid.columns; 

      for (var i = 0; i < columns.length; i++) { 

        var field = (columns[i] as any).field; 

        (columns[i] as any).width = dataBase[field];  // set the already stored columns width value to the Grid columns to achieve your requirement 

      } 

    } 

  } 

 

} 

We have prepared a sample based on this for your reference. In the sample we have stored the column widths in the widow localStorage or if you want to store and retrieve the column widths value from database?

Sample: https://stackblitz.com/edit/react-ferxar-und6sb?file=grid.js

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound
                https://ej2.syncfusion.com/angular/documentation/api/grid/#resizestop
                https://ej2.syncfusion.com/angular/documentation/api/grid/#load

If we misunderstood your requirement, please explain your requirement with video demonstration that will be helpful for us to provide better solution.

Regards,
Praveenkumar G 

[lorryl]

I don't want to be that complicated.

I only have a button to restore the column width, and the grid has total 10 columns, and only 1 column visible is true, and the visible column width is 50.

I make the columns, and call "grid.columns = columns;" and "grid.refresh()".

After click the restore button, the only visible columns is showed, but it's width is not 50, it full filled the grid width auto. 

That's not I want. 

Do you have idear?

[Praveenkumar Gajendiran]

Hi Lorryl,

Thanks for your update.

We checked your query, based on that we have prepared a sample, in that we used ‘autoFitColumns’ feature and set the mode as Normal in the resizeSettings property to achieve your requirement. Please check the below sample and document for more information, 

Sample: https://stackblitz.com/edit/angular-6dpbdp-4n3mzq?file=app.component.ts

AutoFitColumns Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns 

API Link: https://ej2.syncfusion.com/react/documentation/api/grid/resizeSettingsModel/#mode

If you still face the issue, please get back to us with the below details that will be helpful for us to proceed further. 

1)                 Share the complete Grid rendering code example. 

2)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

3)                 Let us know the replication procedure for reproducing the problem. 

4)                 Syncfusion package version used. 

Regards,
Praveenkumar G 

[lorryl]

I don't want to be that complicated.

I only have a button to restore the column width, and the grid has total 10 columns, and only 1 column visible is true, and the visible column width is 50.

I make the columns, and call "grid.columns = columns;" and "grid.refresh()".

After click the restore button, the only visible columns is showed, but it's width is not 50, it full filled the grid width auto. 

That's not I want. 

Do you have idear?

Hi,

Thanks for your reply.

If I add the autoFitColumns function in the databound of grid, the width will not be the fixed 50px.

Please check it.

[Praveenkumar Gajendiran]

Hi Lorryl,

By default AutoFitColumns method resizes the columns to fit the widest cell’s content without wrapping. If you want the fixed column width while using AutoFitColumns feature, we suggest you to use the column.minWidth and column.maxWidth property of Gird as demonstrated in the below code example to achieve your requirement.

Refer the below code example, sample and documentation for more information.

Code Example: 

<e-column field='CustomerID' headerText='Customer ID' minWidth='90' width='90' maxWidth='90'></e-column> 

Sample: https://stackblitz.com/edit/angular-6dpbdp-qkkuxl?file=app.component.html 

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#minwidth
                 https://ej2.syncfusion.com/angular/documentation/api/grid/column/#maxwidth

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G. 

[lorryl]

Hi,

I tested using the AutoFitColumns, minWidth and maxWidth, it can solve the width problem.

But, I cannot resize the column again, because my grid set the "[allowResizing]="true"", the column width can be resized.

How to fixed the grid width after restore the grid columns?

[Praveenkumar Gajendiran]

Hi Lorryl,

Thanks for your update. 

By default in EJ2 Grid, Column resize can be restricted between the minimum and maximum width by defining the MinWidth and MaxWidth properties of Columns. You can resize the column between MinWidth and MaxWidth.

Based on your requirement, you want the fixed column width while using the AutoFitColumns feature, so we suggested you to use the column.minWidth and column.maxWidth property of Gird. You can resize your column width below the MaxWidth value by unset the MinWidth property to the Columns.

Please get back to us if you need further assistance.

Regards,
Praveenkumar G