Drag And Drop with Script Setup

[Raphael]

Hello good afternoon. All good?

I'm trying to use Drag and Drop in the standard Vue 3 setup script but without success.

Grid result:

But when I try to click and pull some of the lines nothing happens, simply the texts are selected.

[Rajapandiyan Settu]

Hi Raphael,

Thanks for contacting Syncfusion support.

Currently, the EJ2 Vue Grid does not have complete support for Composition API. We already logged a feature request - “Need add support for Provide/Inject in Vue Custom slot” for this requirement. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this feature will be included in our Volume 1 2023 Release.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback: https://www.syncfusion.com/feedback/36677/need-add-support-for-provide-inject-in-vue-custom-slot

In EJ2 Vue3 Grid, we can inject the services in the provider sections like below,

 

[App.vue]

<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Page, RowDD } from '@syncfusion/ej2-vue-grids';

 

export default {

  name: 'App',

  components: {

    'ejs-grid' : GridComponent,

    'e-columns' : ColumnsDirective,

    'e-column' : ColumnDirective,

  },

  setup() {

    const gridData = data;

    return {

      gridData

    }

  },

  provide:{

    grid:[Page,RowDD]

  }

};

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_grid_columntemplate-567218042.zip

Regards,

Rajapandiyan S

[Raphael]

Alright, I managed to get the Drag and Drop to work.

Now the following question remains: How do I get the reordered elements after I do the Drag And Drop?

[Rajapandiyan Settu]

Hi Raphael,

By using the rowDrop event of Grid component, you can get the drop records details from the event arguments.

rowDrop: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdrop

 

<template>

    <ejs-grid

      ref="grid"

      :dataSource="data"

      :allowRowDragAndDrop="true"

      :rowDrop="rowDrop"

    >

      ----

    </ejs-grid>

  </div>

</template>

 

<script>

export default {

  ---

  methods:{

    rowDrop: function (args){

      console.log(args);

      console.log(args.data);

    }

  },

};

</script>

Regards,

Rajapandiyan S