Disable column resizing when columns width is less than grid width

Question

Hi Team,We have a requirement where user should not be able to see empty(white) after user resizes the columns.How to restrict the user from resizing when the columns width is less than the grid's width to avoid empty space at the end.I have added a working sample codepen.

Vue Template (forked) - CodeSandbox

Regards,Cyril OvelyAttachment: resizingissue_aeea3bf4.zip

Vinitha Balasubramanian · Accepted Answer

Cyril,We have prepared a sample with latest version. Find the
below sample and video demo for your reference.Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Resize_VueSample-198349092Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Resizing_VideoDemo-169186111If you still face same issue, please share the below details
that would be helpful for us to validate.
 Share your complete Grid
     rendering code.
 Share the issue scenario
     in video demonstration format.

Vinitha Balasubramanian · Answer

Hi Cyril,Greetings from 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 and
autofit the columns width to achieve your requirement.

[App.vue]
   
  export
  default Vue.extend({
    data:
  () => {
     
  return {
       
  data: gridData,
       
  pageSettings: { pageSize: 5 },
       
  editSettings: {
         
  allowEditing: true,
         
  allowAdding: true,
         
  newRowPosition: "Bottom",
       
  },
       
  resizeSettings: { mode:
  "Auto" },
     
  };
    },
   
  methods: {
     
  dataBound: function () {
       
  this.$refs.grid.autoFitColumns();
     
  },
  …
  }

Sample : https://codesandbox.io/s/vue-template-forked-wohzg6API : https://ej2.syncfusion.com/vue/documentation/api/grid/#databound        
https://ej2.syncfusion.com/vue/documentation/api/grid/#autofitcolumns        
https://ej2.syncfusion.com/vue/documentation/api/grid/resizeSettings/Regards,Vinitha
Balasubramanian

Cyril Ovely · Answer

Hi Vinitha Balasubramanian,Thanks for your reply. I have gone through the documentation.Here, we want to prevent user from seeing empty(white) space after user resizes the columns.In the above provided example, user is able to see empty space at the end and also resize If there is a way to stop users from resizing columns when the width of the column is less than the width of the grid, please update.Regards,Cyril Ovely