Turn Kendo grid into draggable Item

[Coty]

Can I make a kendo grid a draggable item?  What I would like to do for example is have 2 or more grids on a page and the user can click the header of the grid and move them around to different drop zones on the page.  Like a customized widget dashboard.

Is this possible?

Thanks,

Coty

[Coty]

It looks like I could just hide the grid header and place it into a draggable container and put some padding at the top of the container to simulate the grid header, but it's really just a handle for the draggable item?  Let me know if there is a better approach.

Thanks.

[Alexander Valchev]

Hello Coty,

I would not recommend this because changing the place of the Grid requires DOM manipulations with the Grid wrapper element. The widget is not intended to be moved hence it is not tested in such scenarios.

Regards,
Alexander Valchev
Telerik

 

 

[Coty]

Ok - just to make sure I am understanding, this wouldn't work?  (I'm not at a place I can test currently)

<div class="draggable-item">
   <div class="DragHandle></div>
    <div id="grid"></div>
</div>

Where draggable item gets initialized as a kendo draggable item with a handle of DragHandle, and grid get's initiliazed as a kendo grid.

If this does work, would  you initialize the grid first then the draggable item or vice versa?  If it doesn't work it should! :)

     

[Alexander Valchev]

Hi Coty,

I am not saying that this will not work, but that you might experience issues depending on the combination of Grid features that are turned on. For example I would not recommend this if you plan to use virtual scroller.

Here is a very simple example that works:

• http://dojo.telerik.com/OHowE

Regards,
Alexander Valchev
Telerik