ag-grid: Column Moving not working properly for ag-grid-vue ( vue version v2.0)

Column Moving not working properly for ag-grid-vue ( vue version v2.0) an not-allowed eye symbol is shown while trying to drag the column

I’m submitting a …

[x] bug report => see 'Providing a Reproducible Scenario'
[x] support request => see 'Requesting Community Support'

Requesting Community Support

If you are not a customer of AG Grid, ag-grid staff will label your issue as managed-by-the-community. This means that AG Grid staff is not going to be actively looking into it and it will get closed if inactive for more than one month. The community is welcome to help with this question/support issue.

A Screencast:

https://user-images.githubusercontent.com/60789760/179152455-9f20bd3e-f7e8-4a1e-af52-a65b1e55e751.mov

Current behavior An not-allowed eye symbol is shown when trying to drag the column and change it’s position.

Expected behavior User should be able to drag and change the columnn position in the table.

AG Grid version: 28.0.0 Checked in the recent ag-grid-vue v28.0.0 itself.
Browser: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36’
Language: [ Vue | ES6/7 | ES5]

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 16 (3 by maintainers)

Most upvoted comments

@aleksiko28 I tried to mess with some DragAndDropService prototype methods and was able to make it work in very simple setup, but it breaks once you have nested shadow dom components. Basically fixing one issues creates another 2. I would really appreciate if AG added native Web Component framework.

VitaliiK91 on Sep 22, 2022

I am having the same issue. I wrap AG grid in Lit Element web component. My guess it might be related to shadow dom. I can’t move columns at all if suppressDragLeaveHidesColumns is set to true.

VitaliiK91 on Sep 16, 2022

@ahmedsakri No. I don’t have any workarounds as of now.

yashwanth2714 on Jul 26, 2022

I’ve taken a look at this all works as expected if you change HelloWorld.vue to have the following

import DemoWc from "@/components/DemoWc";

export default {
    name: "HelloWorld",
    components: {
        'demo-wc': DemoWc
    },

I’m afraid I’m not familiar with your particular setup - including the dynamic bespoke loading you’re doing - to be able to offer a solution to what you’re seeing.

The grid works as expected which indicates that the problem is related to the way you’re loading script dynamically - perhaps some sort of sequencing issue, but regardless this is outside the scope of normal grid support Im afraid.

seanlandsman on Jul 26, 2022

Do you have a repo of this issue we can take a look at? As it stands I’m afraid we don’t have enough information to be able to diagnose what you’re seeing.

seanlandsman on Jul 22, 2022

We can’t reproduce this issue. Seems to be working fine in all of the Vue2 examples on the website.

Can you reproduce the issue by modifying the following plunker:

https://plnkr.co/edit/ZiFQtQD26qN8Otgy?open=main.js

rmc-software on Jul 19, 2022