Data grid allowResizing coupled with autoFit doesnt exclude fixed width columns

[Alex]

Hello, I have a simple data grid that allows column resizing and autofits the columns width.

I want the grid to have 100% width and the first two columns to have an fixed 50px width at all times. What happens is that when the autoFit() method is executed the first two columns doesnt keep their 50px width and instead their width is changed. This also happens when you drag the third column to make it smaller.

How can I achieve this - have 100% grid width, resizing on the columns, have autoFit on columns and most importantly to have the first two column have fixed width that shouldnt be changed at all?

Here is a link to a sandbox that shows the issue (if you click the Open in New window button inside the sandbox you can see the issue better)

https://codesandbox.io/s/vue-template-forked-g0mwn?file=/src/App.vue

Thanks

[Thiyagu Subramani]

Hi Alex, 

Thanks for contacting Syncfusion support. 

By default in EJ2 Grid’s resizeSettings we have option for mode properties like Normal - Columns will not be adjusted to fit the remaining space. Auto - Resized column width will be adjusted by other columns automatically. So based on your shared information we suggest to use mode as Auto to achieve your requirement. 

export default Vue.extend({ 

  data: () => { 

    return { 

      data: gridData, 

      pageSettings: { pageSize: 5 }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 

. . . . .  . . 

      selectOptions: { type: "Multiple" }, 

      resizeSettings: { mode: "Normal" }, 

    }; 

  }, 

  methods: { 

    dataBound: function () { 

      this.$refs.grid.autoFitColumns(); 

    }, 

  }, 

  provide: { 

    grid: [ 

      Sort, 

      Toolbar, 

      . . . . .  . 

    ], 

  }, 

}); 

</script 

 

Sample link: https://codesandbox.io/s/vue-template-forked-53r4d?file=/src/App.vue 

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

Regards, 

Thiyagu S 

[Alex]

Hello Thiyagu, thanks for the reply.

Using the Normal mode in the resizeSettings causes the grid to have an empty space at the right side. One of the requirements that I have is to make the grid take 100% of the space, to have 100% width. 

Here is a list of the requirements I am trying to meet:

1. The grid should have 100% width (no empty space at the right side)
2. The grid should have two columns with fixed width that shouldn't be able to change their width at all
3. The rest of the grid columns that doesn't have a fixed width should have autoFit enabled
4. The rest of the grid columns that doesn't have a fixed width should have resizing enabled

If I use the 'Normal' mode for the resizeSettings, I get an empty space at the right side of the grid which doesnt meet the first point in the list.

If I use the 'Auto' mode for the resizeSettings, the columns with fixed width defined in the template doesnt actually respect it. They change their width on initial load and also after I resize the other columns. This means that the second point in the requirements list is not met.

Here is a gif that is showing the problem with  'Auto' mode for the resizeSettings. Notice how the first two columns should have 50px width but are actually bigger, also notice what happens to them when I try to resize the third column.

[Sujith Kumar Rajkumar]

Hi Alex, 

 

We are currently validating the feasibility of achieving the mentioned requirement in the source-level. So we will provide the further details on 20^th January 2021. 

 

Until then your patience is appreciated. 

 

Regards, 

Sujith R 

[Sujith Kumar Rajkumar]

Hi Alex, 

 

Thanks for your patience. 

 

We checked the reported query and would like to let you know that when ‘Normal’ mode is used the columns will not be adjusted based on the empty white space on the right end of the Grid and when ‘Auto’ mode is used, the resized column width will be adjusted by other columns(including the fixed column width) automatically. This is the default behavior of the Grid’s resize functionality which is also the default html element behavior. Since this cannot be modified, we suggest you to use either one of these modes for your case. 

 

Refer the below API link for the mentioned details on the Grid’s resizeSettings property, 

 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/resizeSettings/ 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Gary Wilkins]

Hi,

I also have the exactly same issue as Alex above.

I want to fix the width of particular columns (so I set min/max/width) and allow the all other columns to be resizable and adjust the space available in the grid, without the blank space on the right hand side.

So I set the resizeSettings behaviour to be Auto to overcome the blank space but find that my fixed width columns are affected by the autosizing of the columns and are > the maxWidth I need to limit them too.

Further I notice that manually resizing any columns results in the fixed width column 'snapping' back down to the correct fixed width.

Is there a way I can 100% fix the width of a column AND allow other columns to be resizable filling the entire width of the grid (so no blank space on the right hand side)

[Rajapandiyan Settu]

Hi Gary,

Thanks for contacting Syncfusion support.

As we said in our previous update when ‘Normal’ mode is used the columns will not be adjusted based on the empty white space on the right end of the Grid and when ‘Auto’ mode is used, the resized column width will be adjusted by other columns(including the fixed column width) automatically. This is the default behavior of the Grid’s resize functionality. Since this cannot be modified, we suggest you to use either one of these modes for your case. 

Refer to the below API link for the mentioned details on the Grid’s resizeSettings property, 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/resizeSettings/ 

Regards,

Rajapandiyan S