Moving shape from one container to another causes "The items collection cannot be used together with the ItemsSource"

8 posts, 0 answers
  1. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    I'm using a RadDiagram, composed of 3 RadDiagramContainerShape's to represent a header/footer/body of a document.  I'm using a custom RadDiagramShape.  I was originally (with no ContainerShape's) binding the RadDiagram to a GraphSource.  I've since switched and set the ItemsSource of each ContainerShape to an ObservableCollection in my ViewModel of a VM i've derived from NodeViewModelBase.  I'm handing the drag/drop operations as well.  I am able to drag an item and drop it in a container, and update the ObservableCollection to get the Container to update.  However, when I drag an item from one Container to the other, I get an exception stating:

    "The Items collection cannot be used together with the ItemsSource. Please set the ItemsSource to null first."

    I can see in the call stack that the observable collection was modified, resulting in this.  

    Can anyone help me out with this?

    Thanks,
    Steve
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 28 Jun 2013 Link to this post

    Hello Steve,

    I can not be sure about your implementation, but it seems that you have set both collections, Items and ItemsSource and this is why you get the exception that you report.

    In order to allow reordering of the shapes, you can implement MVVM approach using the container shapes. You can find a downloadable, ready to run project, demonstrating this approach form our XAML SDK.

    Please take a look at it and feel free to ask any questions.

    Regards,
    Pavel R. Pavlov
    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. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2013

    Posted 03 Jul 2013 Link to this post

    Thanks for pointing me in the direction of the SDK.  I was able to get around my original issue, following the MVVM guidance in the SDK.  One thing I haven't been able to find a sample of is using the MVVM approach and supporting drag and drop with ContainerShapes.  I've got drag and drop working, and container shapes working, but not dragging into a container shape...I have to drop on the diagram first.

    What is the pattern for tackling this problem?

    I tried hooking into the diagram to be notified of a new Shape, so I could hook into the DragDropManager, but I don't see a way to do that. 

    Thanks,
    Steve
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Jul 2013 Link to this post

    Hi Steve,

    Unfortunately at the moment RadDiagram doesn't provide a very straight-forward approach for customizing the RadDiagramContainerShapes built-in drop in MVVM. However, we're currently working on this logic and we will do our best to improve and extend it as much as possible.

    In the meantime, you can try and implement the approach demonstrated in the attached sample project.

    Please note that as I'm not sure what control hosts your source shapes, I defined a sample RadDiagramToolbox control that displays a default collection of items. And as this default collection is populated with Gallery-related business objects I implemented a custom OnDragInitiaize handler for the RadDiagramToolbox. The handler basically takes the dragged object and creates a Model business object - in my solution this is the business object representing the shapes in the data-bound RadDiagram (I'm following the setup demonstrated in the SDK sample Pavel pointed you to).

    Next, I defined a RadDiagram ItemsChanged event handler where I basically check whether a Brand business object is added and if it is, I attach a DragDropManager.OnDrop event handler for the RadDiagramContainerShape that represents it. And if a Brand object is removed, then I detach the event handler of the respective container. I need this operation as I need to implement a custom logic that handles the drop of a new shape on a container.

    Finally, I added a RadDiagram OnDrop event handler to implement custom logic that adds the dragged business data to the RadDiagram GraphSource in case the drop operation scope is outside a ContainerShape.

    Please have a look at the solution and let me know if you need any further information or if I'm missing anything from your requirements.

    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 >>
  6. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2013

    Posted 08 Jul 2013 Link to this post

    Thanks so much for the sample.  I was able to compile and run it, but I don't see any items in the toolbox to drag onto the diagram.  Is there an issue with the sample or am I missing something?  I've attached a screenshot for reference.

  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Jul 2013 Link to this post

    Hello Steve,

    Sorry about that - on my side I was using the latest version of our control Q2 2013 - (v.2013.2.611), where the RadDiagramToolbox has a predefined ItemTemplate in its built-in default style. However, if you're using a different version then it is best to apply an ItemTemplate in the RadDiagramToolbox definition - I modified the solution accordingly. Please give it a try now and let me know if it works.

    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 >>
  8. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2013

    Posted 09 Jul 2013 Link to this post

    Ah that did the trick.  That definitely helped me out, I was able to get it working...kind of...  

    The only problem is that my RadDiagram ItemsChanged handler is getting called twice with the Action of Add for each ContainerShape.  My ContainerDropHandler is getting called twice for each drop (I'm guessing as a result), and therefore I'm creating two items on each drop.

    I debugged the sample you sent and it looks like the same behavior is occurring in the sample (looking at the ContainerShape Internal Items...although oddly enough I don't see two Shapes on the view in the sample...in mine I do).  Any idea what is causing this or how to work around it?  

    Thanks,
    Steve
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 11 Jul 2013 Link to this post

    Hello,

    This issue is caused by my implementation. Basically you need to remove the third argument in the RadDiagram OnDropHandler definition:
    DragDropManager.AddDropHandler(xDiagram, OnDiagramDrop);
    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 >>
Back to Top
UI for WPF is Visual Studio 2017 Ready