Drag and drop from ListBox to DockPanel

[John Benson]

I'm trying to get an app set up to allow me to drag into a dockPanel, and programatically create a Dock Pane based on the contents of the payload.

Is there a working example for this? I can't seem to get the logic right for this. Thank for the help.

[Kiril Stanoev]

Hello John,

I am attaching an example that demonstrates how to drag items from a ListBox and drop them in a RadPaneGroup. Have a look at the source code and if something is unclear, let us know.

Sincerely yours,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[John Benson]

Thanks for the code example, it definatly started me on the right track!

I have one mroe question thought... what should I do when no groups are present? Could I have a 0% opacity pane that went away once I dropped something into it; leaving the other item there?

I also noticed that you cannot drag onto the Panel itself; is this not doable with the current set of controls. Whenever I try to get it working it just seems to break horribly.

Thanks again =)

[Kiril Stanoev]

Hello John,

When no RadSplitContainer or RadPaneGroup is present, you have to add them by yourself from the code-behind. From the previous example, I removed the RadSplitContainer defined in XAML and modified my OnDropInfo event handler to look like the following:

private void OnDropInfo(object sender, DragDropEventArgs e)
{
    var destination = e.Options.Destination;

    // When no split container is available.
    if (e.Options.Status == DragStatus.DropComplete && destination is Telerik.Windows.Controls.RadDocking)
    {
        Telerik.Windows.Controls.RadSplitContainer splitContainer = new Telerik.Windows.Controls.RadSplitContainer();
        Telerik.Windows.Controls.DockingPanel.SetInitialSize(splitContainer, new Size(400, 200));
        splitContainer.MaxWidth = 679;
        splitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedRight;

        (destination as Telerik.Windows.Controls.RadDocking).Items.Add(splitContainer);

        Telerik.Windows.Controls.RadPaneGroup paneGroup = new Telerik.Windows.Controls.RadPaneGroup();

        splitContainer.Items.Add(paneGroup);

        Telerik.Windows.Controls.RadPane pane = new Telerik.Windows.Controls.RadPane();
        pane.Header = (e.Options.Payload as DragDropOperation).Payload;
        paneGroup.Items.Add(pane);
    }

    if (e.Options.Status == DragStatus.DropComplete && destination is Telerik.Windows.Controls.RadPaneGroup)
    {
        Telerik.Windows.Controls.RadPane pane = new Telerik.Windows.Controls.RadPane();
        pane.Header = (e.Options.Payload as DragDropOperation).Payload;
        (destination as Telerik.Windows.Controls.RadPaneGroup).Items.Add(pane);
    }
}

From the code snippet above you can see that when no split container is present, then one has to be created in order to host the RadPane. I am attaching the updated example. Give it a try and let me know if you have additional questions.

Greetings,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[John Benson]

As of Feburary 2nd, 2010 this example no longer works. There seems to be an issue with setting the e.options.payload to sourceControl.DataContext as it appears that sourceControl.DataContext is now null.

Is there a fix for this?

[Miroslav]

Hello John Benson,

It seems that with the latest version the Docking control will apply a style to the controls in its DocumentHost. This interferes with the style for the ListBoxItems and breaks the example.

Wrapping the ListBox in a Grid solve the issue for me.

Does this work for you?

All the best,
Miroslav
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[xav]

Miroslav,
 Can you show the example in XAML what you mean by wrapping the Listbox in a grid. I not sure what that has to do with styles that are applied to contents of the DocumentHost. Thanks!
 - xavier

[Tina Stancheva]

Hello xav,

Please find attached an updated example of how to implement drag and drop between a ListBox and a RadDockPane.

Take a look at it and let me know if ti works for you or if you need more info.

Regards,
Tina Stancheva
the Telerik team