Adding additional drop target to re-orderable grid

4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Jul 2016

    Posted 02 Dec 2016 Link to this post

    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?

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 06 Dec 2016 Link to this post

    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
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Jul 2016

    Posted 06 Dec 2016 in reply to Alex Hajigeorgieva Link to this post

    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?

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 08 Dec 2016 Link to this post

    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
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top