Vue Grid Wrapper Drag Drop a row

[RR]

Hi, 

Is dragging a row from view grid wrapper component available? There's nothing in here

[Nikolay]

Hi Roshan,

The Drag and drop functionality in a wrapper grid can be achieved via the Kendo Sortable widget. For example:

<div id="vueapp">
    <kendo-grid id="grid" :data-source="localDataSource">
        ...
    </kendo-grid>
</div>
 
<script>
  var $ = kendo.jQuery;
  $(function(){
 
    var grid = $('#grid').data('kendoGrid');
     
     grid.table.kendoSortable({
            ...
      });
  })
 
</script>

For your convenience, I have assembled a small sample which demonstrates how to sort via drag and drop in a vuejs wrapper grid:

• https://stackblitz.com/edit/sscbsg?file=index.html

Let me know if you have further questions.

Regards,
Nikolay
Progress Telerik

[RR]

Thank you for the reply. This is great. My requirement is to drag a row as a item in to an external object.(eg:tree).Could this be possible? 

[Nikolay]

Hello Roshan,

This could be achieved using the Kendo Draggable. However, this is not a grid built-in functionality and so it will need to be implemented manually.

Below I am posting two examples that may help you with this. Please note that they use jQuery grid but the logic remains the same for vuejs applications.

• https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/interaction/drag_and_drop_grid_scheduler
• https://docs.telerik.com/kendo-ui/knowledge-base/drag-and-drop-rows-between-two-grids

Regards,
Nikolay
Progress Telerik