# Drag and Drop Rows between Two Grids

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>2.4.0</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## Description

The current Knowledge base article shows how we can drag and drop rows between two Kendo UI for Vue 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.

```js
<template #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 Grid, you can check [this documentation article](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-reorder).

### Runnable example

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/grid-drag-and-drop-rows-between-two-grids/source.txt)