kendo-vue/knowledge-base/grid-drag-and-drop-rows-between-two-grids.md

title	description	type	page_title	slug	tags	res_type	category
Drag and Drop Rows between Two Grids	An example of how to move records from one Kendo UI for Vue Native Grid to another.	how-to	Drag and Drop Rows between Two Grids - Kendo UI for Vue Native Grid	grid-drag-and-drop-rows-between-two-grids	grid, rows, drag, drop, reorder, kendovue	kb	knowledge-base

Environment

Product Version	2.4.0
Product	Progress® Kendo UI for Vue Native

Description

The current Knowledge base article shows how we can drag and drop rows between two Kendo UI for Vue Native Grids.

Solution

To define the Draggable functionality of the Grids' rows, the below slot template is defined and passed to the "Drag" field in each of the Grids.

<template v-slot:myTemplate="{props}">
    <custom  :data-item="props.dataItem"
            @dragover="reorder"
            @dragstart="setActive"
            @dragend="updateRemote"/>
</template>

Once the reorder function from the above template is triggered, it applies the changes in the states of the two Grids.

For more information about the rows reordering in the Kendo UI for Vue Native Grid, you can check this documentation article.

Runnable example

{% meta id:index height:580 %} {% embed_file grid-drag-and-drop-rows-between-two-grids/main.vue preview %} {% embed_file grid-drag-and-drop-rows-between-two-grids/CustomCell.vue %} {% embed_file grid-drag-and-drop-rows-between-two-grids/main.js %} {% embed_file shared/products.json %} {% endmeta %}