RadDiagramToolbox Drag & Drop

15 posts, 0 answers
  1. Frank Filippis
    Frank  Filippis avatar
    5 posts
    Member since:
    Jun 2005

    Posted 20 Sep 2012 Link to this post

    I am trying to intercept the Drop of a RadDiagramShape from the RadDiagramToolbox to the RadDiagram

    from what i think i understand - i have to add a Drag Initialization handler to set up the payload which i can eventually grab by setting up a DropHandler

    i use the following to set up the DragInitialize handler.

     

    DragDropManager.AddDragInitializeHandler(TheRadDiagramToolbox, OnDragInitialize);
     My problem is that the DragInitialization Handler is not firing

    However, my DropHandler is firing
    DragDropManager
    .AddDropHandler(this.Diagram, OnDiagramDrop);

    2 questions -
    1. Am i supposed to use the DragInitializedHandler on the RadDiagramToolbox
    2. Is there anyway to grab the RadDigramShape payload right from the DropHandler without having to call the DragInitializeHandler

    Thank You Very Much
    FF

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Sep 2012 Link to this post

    Hi Frank,

    I am not really sure what is your goal and why you need to handle the drop-related events. However, you can access the RadDiagramShapes through the Drop event handler of the RadDiagram and you can also handle the RadDigramToolBox DragInitialize event to set up custom payload.

    The RadDigramToolBox internally handles the drag operations and this is why when you want to customize its DragInitialize handler, you need to add the handler with value of true (handled events too) as the last parameter of the AddDragInitializeHandler method:
    DragDropManager.AddDragInitializeHandler(TheRadDiagramToolbox, OnDragInitialize,true);
    Only then the event handler will be fired and you'll be able to customize its default logic.

    As for the RadDiagram.Drop event handler, by default it receives an object of type DiagramDropInfo when the drop operation originates from the RadDiagramToolbox. The DiagramDropInfo object exposes a SerializationInfo property, which you can deserialize to get the RadDigramShape that was dragged:
    private void OnDiagramDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
    {
        var droppedData = (e.Data as DataObject).GetData(typeof(DiagramDropInfo));
        if (droppedData != null)
        {
            DiagramDropInfo dropInfo = (DiagramDropInfo)droppedData;
            var items = SerializationService.Default.DeserializeItems(dropInfo.Info, true);
            foreach (var item in items)
            {
                RadDiagramShape droppedShape = item as RadDiagramShape;
            }
        }
    }

    I hope this information will help you build your solution. Still, if you have more questions, please let us know.

    All the best,
    Tina Stancheva
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Frank Filippis
    Frank  Filippis avatar
    5 posts
    Member since:
    Jun 2005

    Posted 24 Sep 2012 Link to this post

    Thank you Tina. I think this will do the trick.

    I want to intercept the drop because some additional structures need to be created once an item is dropped on the Diagram.
  5. Nikhil
    Nikhil avatar
    1 posts
    Member since:
    Apr 2013

    Posted 25 Apr 2013 Link to this post

    I am trying to drag and drop custom shapes, that I created which are in a custom gallery(RadDiagramToolbox), into a RadDiagram.

    I have the following Event Handlers for Drag and Drop. I see that the payload is getting set correctly when I drag the shape but, the droppedData is always null. Tina did mention below that by default the DropEventHandler receives an object of type DiagramDropInfo. What am I missing here. Also, how would I serialize a CustomShape that I have created as below

    public class CustomShape
        {
            public Geometry Geometry { get; set; }
            public string Header { get; set; }
        }


    private void OnDragInitialize(object sender, DragInitializeEventArgs args)
            {
                args.AllowedEffects = System.Windows.DragDropEffects.All; // Coresponds to the QueryResult

                // Coresponds to the payload setting
                var payload = DragDropPayloadManager.GeneratePayload(null);
                payload.SetData("DragData", ((FrameworkElement)args.OriginalSource).DataContext);
                args.Data = payload;
            }

    private void OnDiagramDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
            {
                var droppedData = (e.Data as System.Windows.DataObject).GetData(typeof(DiagramDropInfo));
               
                if (droppedData != null)
                {
                    DiagramDropInfo dropInfo = (DiagramDropInfo)droppedData;
                    var items = SerializationService.Default.DeserializeItems(dropInfo.Info, true);
                    foreach (var item in items)
                    {
                        CustomShape droppedShape = item as CustomShape;
                    }
                }
            }
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Apr 2013 Link to this post

    Hi Nikhil,

    Let me first make a few clarifications. The RadDiagramToolbox control has a built-in dragging implementation that basically gets the dragged object (gallery item) and creates a DiagramDropInfo object that holds the serialization string of the shape displayed inside the GalleryItem. This being said, you need to carefully consider your options before customizing the default drag/drop behavior between the toolbox and a RadDiagram.

    In a basic scenario, where you display custom shapes with two properties - Geometry and Header, you can use the built-in drag-drop logic. However, you'll need to keep in mind that in WPF the RadDiagramToolbox built-in dragging logic cannot serialize the data-bound Geometry property of the shape. This is why you will need to manually serialize the property to make sure that the default DiagramDropInfo that is created while a ToolboxItem is being dragged, contains the serialized Geometry property as well. Then in the RadDiagram you will have to manually deserialize the Geometry. I attached a sample solution demonstrating this approach so that you can take a closer look at it.

    Apart from that approach, you have a few other options. You can leave the RadDiagramToolbox dragging logic as is. This would mean that you don't set any RadDiagramToolbox.OnDragInitialize event handlers. In that case you can add a custom OnDrop event handler for the RadDiagram. And only then you can work with the default DiagramDropInfo data as demonstrated in my previous post.

    The other option you have is to add a custom RadDiagramToolbox.OnDragInitialize event handler. Once you do that, it is up to you to decide what kind of data to pass to the args.Data property. And then you will have to also handle the RadDiagram OnDrop event and get this property. But please keep in mind that in the OnDrop event handler you will get the args.Data object that you have applied in the OnDragInitialize event handler as both events are part of the same process and the dragged data is represented by one object.

    In the code snippets you sent, you've tried the last approach I described. However, in the OnDragInitialize() event handler you set the args.Data using the DragDropPayloadManager and you basically drag a business data - an object of type CustomShape. This is why in the OnDrop event handler you need to use the same approach to get the draggedData (through the DragDropPayloadManager) and you need to keep in mind that the type of the draggedData is a business type - CustomShape:
    private void OnDiagramDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
    {
        var droppedData = DragDropPayloadManager.GetDataFromObject(e.Data, "DragData");
     
        if (droppedData != null)
        {
            ((sender as RadDiagram).GraphSource as IObservableGraphSource).AddNode(droppedData);
     
        }
    }

    Once you get the draggedData you will have to decide how to populate the RadDiagram with items. Whether you'll use the GraphSource property or you will create a RadDiagramShape depends on the requirements and setup of your application. In the above example, I assumed that the RadDiagram should be populated with business data and that its GraphSource is data-bound to a collection that implements the IObservableGraphSource.

    I hope this information will help you. Please don't hesitate to write back with any additional questions.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Sarper
    Sarper avatar
    22 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2013 Link to this post

    Hi Tina,

    I was looking into project that you sent to that topic but i found an issue on deserializing operation. I could not figure out the exact issue,


    public MainWindow()
            {
                InitializeComponent();
                SerializationService.Default.ItemSerializing += Default_ItemSerializing;
            }
     
     
            void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
            {
                if (e.Entity is RadDiagramShape)
                    e.SerializationInfo["MyGeometry"] = (e.Entity as RadDiagramShape).Geometry.ToString();
            }
     
            private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
            {
                if (e.Shape as RadDiagramShape != null)
                    (e.Shape as RadDiagramShape).Geometry = GeometryParser.GetGeometry(e.SerializationInfo["MyGeometry"].ToString());
            }

    Here, 

    (e.Shape as RadDiagramShape).Geometry = GeometryParser.GetGeometry(e.SerializationInfo["MyGeometry"].ToString());
     that line throwing an exception while parsing the serialized geometry so i need some help.

    Thanks,
    Sarper
  8. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 11 Sep 2013 Link to this post

    Hi Sarper,

    I downloaded and tested the application I attached locally but I was not able to detect any issues. Can you confirm that you reproduce an exception in the attached solution without modifying it at all? If so, can you please send us a screencast demonstrating the steps you took to reproduce the exception you report.

    It would also help us if you can check the version of the referenced Telerik assemblies that reproduce the issue.

    Thank you in advance.

    Regards,
    Tina Stancheva
    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 >>
  9. Sarper
    Sarper avatar
    22 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2013 Link to this post

    Hi Tina,

    I downloaded and builded the solution that you've attached again and the same issue occured. I didn't make any changes at all afer downloading.The referenced assemblies were the old versions because of that post is old and so the attached solution is old.

    However, i have upgraded the project's assemblies but the same issue occured again. I will try it with a new project and send the results back to you. Now, I'm sending the screenshots of the process so you can find out where the issue is.

    Note 1: The exceptions about databindings are gone after upgrading the project. 

    Note 2: I have tried it with a new solution and it is same so i am looking forward for your help.

    Thanks,

    Sarper
  10. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Sep 2013 Link to this post

    Hi Sarper,

    I still can't reproduce this issue locally. However, in the snapshots you sent I did note a difference between what I see while debugging and what you see on your side.

    It seems that on my machine the Geometry of the shapes is saved in a string with no semicolons(;) - instead the Geometry elements are separated with spaces. However, on your side the same Geometry uses semicolons to separate the parts of the geometry.

    Although I am not sure what might be causing this inconsistency, you can try to workaround it by replacing all semicolons with spaces like this:
    private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
    {
        if (e.Shape as RadDiagramShape != null)
            (e.Shape as RadDiagramShape).Geometry = GeometryParser.GetGeometry((e.SerializationInfo["MyGeometry"].ToString().Replace(";"," ")));
    }

    Please give this a try and let me know if it helps.

    Regards,
    Tina Stancheva
    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 >>
  11. Sarper
    Sarper avatar
    22 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2013 Link to this post

    Hi Tina,

    I tried your workaround and it worked well for the semicolons ut there is another issue with letters in the format.
    I am sending the screenshots of my format so maybe we can find out the localization issue about serialization.

    Thanks,
    Sarper
  12. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 Sep 2013 Link to this post

    Hi Sarper,

    Thank you for getting back to us. I believe that the cause for the issue is in the Culture set up in your application. Basically the GeometryParser expects a Geometry string in Invariant Culture. However, in my solution when I serialize the Geometry property I don't specify any specific culture and the ToString() method basically uses the default application culture. Instead, if you explicitly use the CultureInfo.InvariantCulture the string should be properly parsed during deserialization:
    void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
    {
        if (e.Entity is RadDiagramShape)
            e.SerializationInfo["MyGeometry"] = (e.Entity as RadDiagramShape).Geometry.ToString(CultureInfo.InvariantCulture);
    }

    Please give this a try and let me know if it helps.

    Regards,
    Tina Stancheva
    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 >>
  13. Sarper
    Sarper avatar
    22 posts
    Member since:
    Aug 2012

    Posted 17 Sep 2013 Link to this post

    Hi Tina,

    Thanks for the reply. It worked well for me. 

    Regards,
    Sarper
  14. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 18 Sep 2014 Link to this post

    Hi Support,

    I also want to add a custom control in the RadDiagramToolBox but I want to add the Pie/Line Chart of Micorsoft in that. Is that possible in the RadDiagramToolBox?

    Thanks
    Rahul
  15. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 19 Sep 2014 Link to this post

    Hello Rahul,

    Yes, you can add a custom control in RadDiagramToolBox, but the approach that can be used depends on your implementation.

    A possible approach is to achieve your requirement is to create a custom diagram shape with a custom style. Then you can place a chart in the shape's ContentTemplate and add it in the toolbox's galleries. For your convenience I prepared a sample project demonstrating this approach.

    You can also take a look at the Dashboard demo that demonstrates drag/drop chart (and other controls) from a toolbox to RadDiagram. Please click the Run button to display the tool box. Notе the the demo is in Silverlight but it shares most of its code with the WPF version of the demos.

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  16. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 01 Oct 2014 in reply to Martin Link to this post

    Thanks so much support. It works for me.

    Thanks
    Rahul
Back to Top
UI for WPF is Visual Studio 2017 Ready