Adding additional drop target to re-orderable grid

[Jonathan]

Hi guys,

I have a requirement to re-implement grid grouping but instead of grouping within the grid itself, I need to generate a separate tree view outside of the grid element. The tree view side of it is fine, but I couldn't see any way that I could set the grid to be groupable (thus showing the groups bar) without grouping being applied to the grid itself. I tried preventingDefault on the group function but this prevented the columns being dropped onto the group bar itself as it seems to be something that occurs after the grid has refreshed.

So now, instead, what I'm trying to do is add a div outside the grid that I can use as a drop target for my grid columns to be dropped on to but this doesn't seem to be working

Here's the dojo: http://dojo.telerik.com/@mancmanomyst/AJoBIj

 

Could you point me in the right direction for allowing the grid columns to be dropped on my target div?

[Alex Hajigeorgieva]

Hi Jonathan,

It is possible to achieve the scenario with the available Kendo UI API.

To drag the Kendo UI Grid header cells only, you should filter them in the Kendo UI Draggable configuration:

http://docs.telerik.com/kendo-ui/api/javascript/ui/draggable#configuration-filter

Make the <div> element a Kendo UI DropTarget and add an event handler to the drop event:

http://docs.telerik.com/kendo-ui/api/javascript/ui/droptarget#events-drop

And here in the event handler function, the custom logic happens. In my sample implementation, I did it with the following steps:

- Obtain the dragged <th> text (e.draggable.currentTarget.text();)
- Group the Kendo UI Grid data source by that field:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-group

- Loop over the Kendo UI data source view to collect all the parents and their children, transformed them to fit the Hierarchical data source of the Kendo UI TreeView and added them:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-add

- Ungroup the Kendo UI Grid Data Source

A sample demo using this approach is available at:

http://dojo.telerik.com/eTuTi

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Jonathan]

Hi Alex,

Thank you for your help but in the example you provided, the grid isn't reorderable and as soon as you make the grid reorderable, you can no longer drag the table headers onto the tree, even though you've still got the tree view setup as a drop target.

See http://dojo.telerik.com/@mancmanomyst/ucoFo

I need both the ability to re-order the columns within the grid and the ability to drag the table headers into another drop target. 

Is there a way to do this?

[Alex Hajigeorgieva]

Hello Jonathan,

To make the Kendo UI TreeView a DropTarget whilst maintaining the reorderable configuration of the Kendo UI Grid, you may use the private property from the original example you sent along, namely:

group: grid._draggableInstance.options.group,

http://docs.telerik.com/kendo-ui/api/javascript/ui/droptarget#configuration-group

Please note that the use of private properties carries a risk of a possible future change. Another potential issue, I would like to address here is the Kendo UI Data Source - if you are using serverOperations, it may cost you additional requests.(Perhaps you have thought about it, but I wanted to mention it nonetheless).

For your convenience, I have updated the demo at:

http://dojo.telerik.com/OZodU

Regards,
Alex Hajigeorgieva
Telerik by Progress