'suppressDragLeaveHidesColumns property from AG-grid Vue not working

I am using AG-Grid 26.2 version and Vue 2.

What I am trying to do is that when a user drags a column outside the grid, the column should not disappear.

But the property is not working.

<ag-grid-vue :suppressDragLeaveHidesColumns="true"/>
vue.jsag-grid-vue


Solution 1:[1]

Not sure how it works with the Vue framework but the mistake I did while using the suppressDragLeaveHidesColumns option was the I was adding it in the columnDefs instead of the gridOptions...

So, the correct way for using it with the vanilla javascript is

const gridOptions = {
  columnDefs: columnDefs,
  defaultColDef: {
    width: 150,
  },
  suppressDragLeaveHidesColumns: true,
};

Other than that I guess you could try using the ag-grid-vue tag like the following:

<ag-grid-vue :suppressDragLeaveHidesColumns="true"></ag-grid-vue>

That's what I saw in their official example here: https://www.ag-grid.com/vue-data-grid/column-moving/#simple-example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shams Ul Azeem

Related Questions