Drag and drop rows between Grids.

[aim Systems]

When moving rows between grids,

I want the selected row to be positioned last in the target grid.

sample source

<template>

<div class="col-lg-12 control-section">

    <div class='e-mastertext'>Drag and Drop Rows between two Grids</div>

    <div style="display: inline-block">

        <ejs-grid id='Grid' :dataSource='srcData' :allowPaging="true" :pageSettings="pageOptions" :allowSelection="true" :allowRowDragAndDrop="true"

            :selectionSettings="selectionOptions" :rowDropSettings="srcDropOptions" width="49%">

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>

                <e-column field='CustomerName' headerText='Customer Name' width='130'></e-column>

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>

            </e-columns>

        </ejs-grid>

        <ejs-grid id='DestGrid' :dataSource='destData' :allowPaging="true" :pageSettings="pageOptions" :allowSelection="true"

            :allowRowDragAndDrop="true" :selectionSettings="selectionOptions" :rowDropSettings="destDropOptions" width="49%" height="400px">

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>

                <e-column field='CustomerName' headerText='Customer Name' width='130'></e-column>

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>

            </e-columns>

        </ejs-grid>

    </div>

</div>

</template>

<!-- custom code start -->

<style scoped>

#Grid {

  float: left;

}

#DestGrid {

  float: right;

}

.e-mastertext {

  font-size: 15px;

  font-family: Roboto;

  opacity: 0.87;

  padding: 1em;

}

</style>

<!-- custom code end -->

<script lang="ts">

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

import { orderDetails } from "./data-source";

export default {

  components: {

    'ejs-grid': GridComponent,

    'e-column': ColumnDirective,

    'e-columns': ColumnsDirective

  },

  data: () => {

    return {

      srcData: orderDetails,

      destData: [],

      pageOptions: { pageCount: 2 },

      selectionOptions: { type: "Multiple" },

      srcDropOptions: { targetID: "DestGrid" },

      destDropOptions: { targetID: "Grid" }

    };

  },

  provide: {

      grid: [RowDD, Page, Selection]

  }

}

</script>

--------------------------------------------------------------------------------------------------------------------------

result : Attachment

Attachment: 20231115_08_30_23_9fbf008.zip

[Vikram Sundararajan]

Hi aim,

Greetings from Syncfusion support,

We have confirmed that the reported behavior is an issue from our side and logged it as - “Last record moved on first when drag and drop ”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle) and will include the defect fix in our upcoming patch release which will be rolled out on December 13, 2023.

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

Feedback:   https://www.syncfusion.com/feedback/48691/last-record-moved-on-first-when-drag-and-drop

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

Regards,

Vikram S

[Vikram Sundararajan]

Hi aim,

We are glad to announce that our Essential Studio 2023 Volume 4 release v24.1.41 is rolled out and is available for download under the following link.

Download Link: https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download

In this release, we have included the improvement “Last record moved on first when drag and drop”.

Release notes:  https://ej2.syncfusion.com/vue/documentation/release-notes/24.1.41?type=all#grid

Sample:  https://stackblitz.com/edit/mwwggw-7j3kba?file=src%2FApp.vue

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Vikram S