Is it possible to have a grid where resize mode is auto but some columns are always fixed width?

Question

I have a grid like this:

I want some of the columns to be always fixed width, but others to be auto so they take up the horizontal space if the grid is expanded. Specifically, I want the string columns to take up the space but the boolean and checkbox columns to always be their initial size. This is like a combination of 'Auto' and 'Normal' for the mode of the ResizeOptions. Is there a way I can do this? If I set to Normal then nothing takes up the space, If I set it to Auto then some columns I don't want take up some extra space.

Cheers,

Paul

Sujith Kumar Rajkumar · Answer

Hi Paul,

Greetings from Syncfusion support.

Based on the provided information we could understand that your requirement is to have some columns with fixed width and not allow it to be resized. You can achieve it by setting the required static width and then disabling resizing for the required columns(by setting column ‘allowResizing’ property as ‘false’) for which you need to have fixed width.

<e-column field='Verified' headerText='State' [allowResizing]='false' [displayAsCheckBox]="true" width="80"></e-column>

We have prepared a sample based on this for your reference. You can find it below,

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

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-resizing

API: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#allowresizing

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

Regards,

Sujith R

Paul Fitchett · Answer

Hi,Unfortunately, this doesn't do what I want. I'm sorry but I should have mentioned I want the grid to be 100% wide, i.e. fit into the outer container. If I change app.component.html to this, you will see that the State column also resizes when I widen and shrink the size of the window on the right in the stackblitz. The other columns should be getting some of the extra space, but the State column should not. I will attach a video showing this.

Paul Fitchett · Answer

I have attached a video nowAttachment: columnresizingissue.mp4_343a5f13.zip

Sujith Kumar Rajkumar · Answer

Hi Paul, 
 
Based on your query we would like to let you know that when the Grid is initialized it will render the columns with the provided width(if not provided it will be auto calculated) and then the remaining Grid element width will be split and auto adjusted to the columns. This is its default behavior. Like for example, when a column width is set as ‘80’ and the Grid element has remaining width after rendering all the columns based on the defined width, then the remaining widths will be split among the columns. Now since you are setting the Grid width as ‘100%’, the Grid element width will get increased or decreased on browser resize and on doing so the additional element width will be split and assigned among all the columns. This is the behavior of this case. 
 
So if you do not need this behavior, then we suggest you to set a static width to the Grid’s parent element which will prevent the static column width from changing. And you can resize the remaining columns using the resize handlers in the column headers. 
 
Please find the below modified sample based on this for your reference, 
 
Sample: https://stackblitz.com/edit/angular-ewl9gf-6hmkqw?file=app.component.html 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R