After resizing the column width, delete the column and the column width will change automatically

I want the column width to always be fixed unless I adjust the column width or change the width in the column. But after I adjust the column width and delete a column, all the previous column widths will change automatically.

If I do not adjust the column width and delete the column directly, all the column widths will not change.

This is my examplehttps://stackblitz.com/edit/angular-3xvjx2?file=main.ts,app.component.ts,app.component.html

video_demo_3fa3a229.zip: There are two video screens in the demo,

video_ 1: Delete it directly. The column width has not changed. When the column width cannot support the whole screen, the column width will change. I don't want it to change

video_ 2: First, adjust the column width. After deleting the column, all the previous column widths are directly changed,

I don't want them to change the column width. What should I do,


I want to keep the width fixed without automatically stretching to fill the screen. At the same time, when I drag the column width or directly set the value of column width, I can change the column width. What should I do
Attachment: video_demo_3fa3a229.zip


2 Replies

PS Priyadarshan Selvan Syncfusion Team June 25, 2022 09:08 AM UTC

Hi liu,


Thanks for contacting syncfusion support.


We were able to reproduce the issue at our end and it is related to our dependent team component. We have forwarded this to the concern team and will share the further details within two business days on 28th June 2022. 

Until then we appreciate your patience.


Regards,

Priyadarshan Selvan




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 28, 2022 02:40 PM UTC

Hi Liu,


Thanks for your patience.


By using the width property of column, you can set width to the column.


Width:
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#width


We would like to share the behavior of the TreeGrid structure. If we didn’t provide any width to the TreeGrid component, then the default value `auto` is set to the TreeGrid’s width which adapts its parent container’s width.

For example, consider the parent container width or screen width as 1400px. Grid calculates total columns width and compares it with the parent container's width. If the parent container width is greater than the width of the total column then the remaining parent container width is equally shared to all the Columns like a normal HTML table. If the TreeGrid’s total columns width exceeds its parent container width then the horizontal scrollbar is shown in the TreeGrid. Since this is the default behavior of the HTML tables.

But in your requirement, you want fixed width for all the columns. It is not feasible in the TreeGrid. However, we suggest you to set any one of the column width as auto and minWidth as ‘*px’ (120px). So the remaining width of the TreeGrid will be shared with that particular column only.


  <e-column

        field="taskName"

        headerText="Task Name"

        width="auto"

        minWidth="120"

      ></e-column>

 


Sample: https://stackblitz.com/edit/angular-3xvjx2-evpssg?file=main.ts,app.component.ts,app.component.html

Please get back to us if you need any further assistance.


Regards, 

Farveen sulthana T


Loader.
Up arrow icon