Freeze column Right and Left

Question

Hello,In our requirement we need to freez column at left for checkbox and right for actions.How can set column completly to the right side ? We need to set de column a particular size.https://stackblitz.com/edit/github-qa3umq-qzigak?file=src%2Fapp.component.ts We want this design :

Aishwarya Rameshbabu · Accepted Answer

Hi BERNARD Ludovic,We
are glad to announce that, we have included the fix for the issue “column autoFit property is not
considered even when resizeSettings mode is set to normal and another column
width property value is set to auto.” in our 26.2.12 release. So please
upgrade to our latest version of the Syncfusion package to resolve the reported
issue.Root
cause:
Previously both content and header table width not applied to grid when we
define column autofit property as true even on normal resizeSettings mode.Fix: Now we handled to
set the table width for both content and header when resizeSettings mode is
normal to resolve the issue.Feedback
link: https://www.syncfusion.com/feedback/60694/column-autofit-property-not-consider-even-resizesettings-mode-as-normal-when-applyRelease notes: https://ej2.syncfusion.com/angular/documentation/release-notes/26.2.12?type=all#gridWorking
sample:
https://stackblitz.com/edit/github-qa3umq-wrvbme?file=package.json,src%2Fapp.component.tsAs we
mentioned in our previous update, the minWidth and maxWidth defined for the
grid columns will be taken into account only at the time of resizing the
columns. In the above sample, we have enabled the property autofit for the
column OrderID where the minWidth and maxWidth are taken into consideration.However,
to meet your requirement of freezing columns at both the right and left edges
of the grid without any white space, the width of the movable columns need to
be set to auto. Please refer to the sample below.Sample: https://stackblitz.com/edit/github-qa3umq-vcxz3y?file=package.json,src%2Fapp.component.tsRegards,Aishwarya R

Vikram Sundararajan · Answer

Hi BERNARD Ludovic,Greetings from Syncfusion support,To freeze columns on both the left and right sides of a Syncfusion EJ2 Grid, you can set the freeze property to Left for the checkbox column and Right for the actions column. Additionally, you can specify the width for these columns to ensure they have a particular size. Please refer the below code snippet, sample and documentation for more reference, //Other columns Sample: https://stackblitz.com/edit/github-qa3umq-egenfb?file=src%2Fapp.component.tsFreeze: https://ej2.syncfusion.com/angular/documentation/grid/columns/frozen-column#freeze-directionColumn-width: https://ej2.syncfusion.com/angular/documentation/grid/columns/columns#column-widthIf we have misunderstood your query, please provide the detailed explanation of your requirement, which will help us to understand and provide appropriate solution.Regards,Vikram S

BERNARD Ludovic · Answer

Hello,
yes in your example it works because you have set mutiple column.

but when we have juste 2 column except freeze right and left the right side is not fixed completly at the right.

In our requirement we need to set action column always at the right side of the grid

Image_7264_1722409864922

Vikram Sundararajan · Answer

Hi BERNARD Ludovic,We understand that you have only two columns apart from
the freeze columns, and the freeze on the right is not applied completely. Upon
reviewing your code, we noticed that all the Grid columns have a static width
property set. When the Grid’s width becomes larger than the total column width,
an empty space will appear at the end of the Grid. By default, the Grid will
increase the width of all columns to fill this space when the Grid width
exceeds the total column width. Additionally, the “autoFit” property of
the Grid is set to “true”, which sets the Grid columns' width based on
the “columns.width” property regardless of the Grid's width,
resulting in empty space at the end of the Grid. We suggest you remove the autoFit
property for the Grid.Furthermore, we have found that you have used the minWidth
and maxWidth properties for the freeze columns. These properties are
only considered during column resizing, so we suggest you remove the minWidth
and maxWidth properties for the freeze columns.Please refer the below sample and documentation for more
information,Sample: https://stackblitz.com/edit/github-qa3umq-iykvkw?file=src%2Fapp.component.ts
Column-width: https://ej2.syncfusion.com/angular/documentation/grid/columns/columns#column-widthAutoFit :https://ej2.syncfusion.com/angular/documentation/grid/columns/columns#autofit-columns-with-empty-spacePlease let us know if you have any further queries.Regards,Vikram S

BERNARD Ludovic · Answer

Hello, thanks for your quick response.

The width of the right and left columns is set to 30px. In your example, the width adjusts to the screen size. Can we specify a maximum width of the column to be exactly 30px, no more, no less?

It works with this version of syncfusion 20.3.47 : here the sample : https://stackblitz.com/edit/github-qa3umq-z3fze5?file=package.json But we would like to update Syncfusion to version 26.

Thx

Aishwarya Rameshbabu · Answer

Hi BERNARD Ludovic,After reviewing your query,
we have identified that you are experiencing an issue where the column width
adjusts with screen size. You want to set a fixed column width similar to
version 20.3.47. We have updated the Grid's frozen feature from a three-table
approach to a single table in version 23.1.36. Please refer to the release
notes in the below link. This impacts column width on screen resize. In this
approach, by default, column width adjusts based on screen size, but you can
achieve a fixed width by setting the column's minWidth and maxWidth.Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/23.1.36?type=all#gridSo,
we have confirmed that the reported behavior is an issue from our side and
logged it as “When freeze property is enabled the minWidth and maxWidth
set to a column is not working properly”. Thank you for taking the
time to report this issue and helping us improve our product. At Syncfusion, we
are committed to fixing all validated defects (subject to technical feasibility
and Product
Development Life Cycle ) and will include the defect fix in our
upcoming patch release which will be rolled out on “August 20th, 2024”.You
can now track the current status of your request, review the proposed
resolution timeline, and contact us for any further inquiries through the below
link,Feedback: https://www.syncfusion.com/feedback/60107/when-freeze-property-is-enabled-the-minwidth-and-maxwidth-set-to-a-column-is-notDisclaimer: "Inclusion of this solution in the weekly release may change due
to other factors including but not limited to QA checks and works
reprioritization".RegardsAishwarya
R

Aishwarya Rameshbabu · Answer

Hi BERNARD Ludovic, We are glad to announce that, we have
included the fix for the issue “When freeze property is enabled the minWidth and maxWidth set to a
column is not working properly” in our 26.2.10 release.
So please upgrade to our latest version of the Syncfusion package to resolve
the reported issue. Root Cause: The problem arose due to not
setting the col width as auto when defining the corresponding column width
property as auto. Solution: Fixed the issue by setting the col
width as auto when defining the corresponding column width property as auto. Sample: https://stackblitz.com/edit/github-qa3umq-kcrtnf?file=src%2Fapp.component.ts,package.json   Feedback: https://www.syncfusion.com/feedback/60107/when-freeze-property-is-enabled-the-minwidth-and-maxwidth-set-to-a-column-is-not We thank
you for your support and appreciate your patience in waiting for this release.
Please get back to us if you need any further assistance.  Regards,Aishwarya R

BERNARD Ludovic · Answer

Hello

thanks for your update :

I have another problem right now :
Let's imagine I set column freight at 50 the right and left column min max width are incorrect.

see our stackblitz here :

https://stackblitz.com/edit/github-qa3umq-9dxg4y?file=src%2Fapp.component.ts

It worked on 20.3.47 : https://stackblitz.com/edit/github-qa3umq-ba11vv?file=src%2Fapp.component.ts

Vasanthakumar K · Answer

Hi BERNARD Ludovic,Sorry for any inconvenience caused.We have validated your query and understand that when you
try to set the width for a movable column, the left and right frozen columns
exceed the specified column `maxWidth`. We have already identified that the
solution related to `minWidth` and `maxWidth` being incorrectly assigned as the
column width is a known issue from our end and has already been considered a
bug: “column autoFit property not considered even when resizeSettings mode
is normal when applying other column width property value as auto.” We are
addressing this issue with high priority and will expedite the fix. The fix and
a related sample will be included in the upcoming patch release on September
3rd, 2024. We appreciate your patience until then.You can now track the current status of your request, review
the proposed resolution timeline, and contact us for any further inquiries
through this link.Feedback link: column autoFit property not consider even resizeSettings mode as normal
when apply other column width as auto in JavaScript | Feedback Portal
(syncfusion.com)Please note that during the Grid's initial render, minWidth
and maxWidth settings are not considered, consistent with HTML standards. The
Grid will occupy the full available space if the total column width is less
than the Grid width, automatically adjusting the column widths based on HTML
table standards. Please refer to this HTML table sample
for your reference. Conversely, if the Grid’s width is smaller than the total
column width, a scrollbar will appear, and columns set to auto-width may become
invisible. Please refer to this HTML table sample
for your reference.When using the Grid's auto-fit feature or resizing any
column, the Grid will adjust the table width based on the original column
widths, considering all minWidth and maxWidth settings. If the total column
width is less than the Grid width, the remaining space will appear as empty.
The minWidth and maxWidth settings prevent resizing outside their defined
range. Setting the width to auto during the initial render may occupy the full
space, but it will change dynamically when resizing or auto-fitting, leading to
"jumping". We recommend setting a static width for the column when
maxWidth is defined instead of setting the width to auto.Note: If you want to occupy the Freight movable
column balance available grid’s space only (all other width specified column
balance grid space), then you can set the width as `auto` for movable Freight
column.Regards,Vasanthakumar K

BERNARD Ludovic · Answer

Hello,

We have retrieved the latest version of your Syncfusion package. This does not resolve the issue on our end.

Indeed, our users can set a specific size for the columns, and we save the state of the grid to restore it when a user returns to it. The columns are therefore defined with fixed sizes in pixels, and we want to keep the first and last columns with a fixed, non-resizable size.

For example, as shown in this example:
https://stackblitz.com/edit/github-qa3umq-9dxg4y?file=src%2Fapp.component.ts,package.json,index.html

How can we make it work as it did before? See: It worked on 20.3.47
https://stackblitz.com/edit/github-qa3umq-ba11vv?file=src%2Fapp.component.ts

regards