We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag And Drop with Script Setup

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.





3 Replies

RS Rajapandiyan Settu Syncfusion Team February 20, 2023 04:44 AM UTC

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



RA Raphael February 22, 2023 11:53 PM UTC

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?



RS Rajapandiyan Settu Syncfusion Team February 24, 2023 03:53 AM UTC

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


Loader.
Up arrow icon