Limit drop to existing Nodes

4 posts, 1 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 15 Jul 2013 Link to this post

    Hi,

    my approach (using MVVM) is something like your "OrgChart" example.

    Assume this example, where you start with the CEO predefined.
    Then from a list the user can drag employees to  the chart.
    Employees can change their position (by being dragged to a different "chief / leader").
    Every Employee is assigned to another one.
    There are kind of employees which may not "rule" others (let's say trainees). These employees can't act as "drop destination"

    So the rules are:
    - One node is fixed (CEO)
    - the user must drop the new / existing Node on an existing one
    - depending on the node type dropping is enabled or not (Visual feedback should be provided - like containers do)

    After a drop operation I recalculate the Org-Model add / remove connectors and redraw the chart.

    Is there an easy way to achieve this?

    Manfred
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 18 Jul 2013 Link to this post

    Hi Manfred,
    I'm not sure what do you mean by "easy way" but there's a way to achieve this. There are two ways to do this:
    1) The easier way is to use DiagramContainerShapes because they already handle dropping in them and using the CommandExecuted event you can determine if it's a container drop or a drop somewhere else. Also you could use the IsDropEnabled property to enable/disable dropping.
    2) Inherit our DiagramShapes and implement the IDragDropAware interface, this way you'll be able to handle the dnd of another shapes into them and add some custom logic for this.
    For the fixed (CEO) shape you could use the PreviewDrag event and just handle it if you're trying to drag the CEO. The problem at the moment is that the RadDiagram doesn't support DnD from outside of it in MVVM scenarios. You could add our DropHandlers but this will be additional work and after the upcoming SP (next week) the Diagram will support this scenarios out of the box.
    I've attached a very simple project demonstrating the first approach so could you please take a look and if you have further questions feel free to ask.

    Regards,
    Zarko
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 19 Jul 2013 Link to this post

    Hi Zarko,

    thank you for the answer and the sample.
    I already implemented your second idea and it works (almost) like intended.

    First I tried to inherit the container - but the lack of routing and connectors as well as layout (I use networklayout) brought me to solution two.
    Implementing IDropAware was pretty easy and by using DragDropManager I also managed to drop new Items from a RadGrid.

    My Problem (therefore I wrote almost above) - is styling of the node.
    If I keep the existing style everything works fine.
    If I provide my own (extracted via Blend) I loose connector adorner and so forth (no longer theme aware)
    I started a thread about it here http://www.telerik.com/community/forums/wpf/diagram/thema-aware-styling-with-connectors.aspx

    I'd like to have my own style since I want to visualize possible drop operation - but since the "styling problem" is solved I stay with visual feedback via DnD cursor.

    I'm curious about the upcoming "external DnD support" - maybe it makes the things a bit easier.

    Thanks
    Manfred
  5. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 22 Jul 2013 Link to this post

    Hi Manfred,
    Could you please my answer from this thread - it explains the problem with the extracted style.
    As for the "external DnD support" - after the service pack you'll be able to handle the DragInitialize event of the DragDropManager (for ListBox, Toolbox, ToolBar and etc.) and do something like this:
    private void OnDragInitialized(object sender, DragInitializeEventArgs e)
    {
        var container = e.OriginalSource as ListBoxItem;
        if (container != null)
        {
            var item = this.listBox.ItemContainerGenerator.ItemFromContainer(container) as NodeViewModelBase;
     
            var dragInfo = new DiagramDropInfo(new Size(60, 40), SerializationService.Default.SerializeItems(new List<IShape>() { new RadDiagramShape() { Content = item.Content } }));
            e.Data = dragInfo;
            e.AllowedEffects = DragDropEffects.All;
        }
    }
    (note: in the RadDiagramShape you can set whatever properties you like)
    And when you drop this element in the RadDiagram the DeserializeNode method of your ISerializableGraphSource will be called with the deserialized RadDiagramShape so you could reconstruct your business object from its properties. This way you'll be able to transfer any information you want between the drag source and the RadDiagram.
    I hope I was able to help you and if you have further questions please feel free to ask.

    Regards,
    Zarko
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top