Telerik Forums / UI for Silverlight Forum / RichTextBox /

RichTextBox loses contents on drag&drop

Telerik UI for Silverlight
Resources Buy Try

13 posts, 0 answers

Andrew

23 posts

Member since:
Oct 2008

Posted 09 Mar 2011 Link to this post

Hello,

I have a RichTextBox in a StackPanel and when I drag and drop (implemented using RadDragAnDropManager) the RichTextBox loses contents on drop. I suspect this is because of the unload(removing and adding it back to the visual tree).

Can you please give some hints how to make the control not lose his contents?

Thanks
Andrew

23 posts

Member since:
Oct 2008

Posted 09 Mar 2011 Link to this post

Sorry, I answered the question myself already :)
Angeli

29 posts

Member since:
Apr 2011

Posted 29 Apr 2011 Link to this post

Hi ken.

I was wondering if what type of file/object were you trying to drop onto the RadRichTextBox? I kind of have a problem with dragging images in a stackpanel onto the rich textbox. Is that even possible? You said you already solved your problem. I hope you can help me.
Andrew

23 posts

Member since:
Oct 2008

Posted 29 Apr 2011 Link to this post

Hi

My scenario was that I was having a stack panel containing different items, one of them being a RichTextBox.
On dropping such an item, the RichTextBox (contained in this item) was losing its content.

What you describe it's different.
If you drop on RadRichTextBox an image, not sure what is the default behavior of RichTextBox, not sure even if there is one.
How are you implementing the drop?
Angeli

29 posts

Member since:
Apr 2011

Posted 30 Apr 2011 Link to this post

I was trying to put an AllowDrop property to the work area or shall we say the rich textbox. It still won't work. :(
Iva Toteva
Admin

1319 posts
Posted 04 May 2011 Link to this post

Hello Angeli,
Please find attached a sample application illustrating how you can insert images from files on drag and drop, as well as how you can use RadDragAndDropManager to for a TreeView in the same application.
If this is not what you were looking for, do not hesitate to contact us again.
Regards,
Iva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

DragAndDrop.zip
Angeli

29 posts

Member since:
Apr 2011

Posted 04 May 2011 Link to this post

Hi Iva! Thank you so much for the example. It was exactly what I was looking for. Thanks again! :)
Angeli

29 posts

Member since:
Apr 2011

Posted 04 May 2011 Link to this post

Hi Iva! Sorry to bother you again. I tried to experiment with your code and added a list box with images in it. I wanted to drag them to the RadRichTextBox but I'm missing some parts. What must I add to radRichTextBox_Drop method to make it work?
Ivailo Karamanolev
Admin

276 posts

Posted 05 May 2011 Link to this post

Hello Angeli,

The AllowDrop property and the Drop event are used only when dragging and dropping files from the OS to the Silverlight application. In order to use drag & drop inside your application, for objects that reside in it, you have to use RadDragAndDropManager. Please refer to the demo project Iva sent you on how to use it. It is implemented by registering query methods, as in the demo:

RadDragAndDropManager.AddDragQueryHandler(radTreeView, OnDragQuery);

RadDragAndDropManager.AddDropQueryHandler(radRichTextBox, OnDropQuery);

RadDragAndDropManager.AddDragInfoHandler(radTreeView, OnDragInfo);

RadDragAndDropManager.AddDropInfoHandler(radRichTextBox, OnDropInfo);

Kind regards,
Ivailo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Angeli

29 posts

Member since:
Apr 2011

Posted 05 May 2011 Link to this post

Hi Ivailo. Thanks for responding.

I already got the idea behind the lines of code you sent. My problem now is translating the dropped image coming from a listbox into the RadRichTextBox. The example Iva sent was dropping an external image onto the richtextbox. I understand that this line of code below is for dropping the TreeViewItem onto the richtext box and transforming it to string.

Span span = new Span(((RadTreeViewItem)e.Options.Payload).Header.ToString());

rrtb.Document.InsertInline(span);

I'm now having difficulty in doing it with an image since the given example was a text.

if (e.Options.Source is Image)

{

    Image draggedImg = e.Options.Source as Image;

/*

    Section section = new Section();

    Paragraph paragraph = new Paragraph();

    Stream stream = Application.GetResourceStream( new Uri(@"/DragAndDrop;component/images/image_1.png", UriKind.RelativeOrAbsolute ) ).Stream;

    Size size = new Size( 236, 50 );

    ImageInline image = new ImageInline( stream, size, "png" );

    paragraph.Inlines.Add( image);

    section.Children.Add( paragraph );

    rrtb.Document.Sections.Add(section);

*/

}

The commented part I got from http://www.telerik.com/help/silverlight/radrichtextbox-features-layout-elements-inlineimage.html which enables the user to attach an image to the document.

I don't know how to go about with DragDropQueryEventArgs e. I hope you can help me.
Angeli

29 posts

Member since:
Apr 2011

Posted 08 May 2011 Link to this post

should I use e.Options.Payload or e.Options.Source?

I tried putting an indicator to identify the dragged element as an image by showing a message box once the image was dragged but nothing shows unlike the treeview which displays a message that it was a treeviewitem that was dragged.

I hope to hear from you soon.
Iva Toteva
Admin

1319 posts

Posted 10 May 2011 Link to this post

Hello Angeli,
e.Options.Source is the RadTreeViewItem that is being dragged.
e.Opions.Payload is the value that you wish to transfer between controls.

For example, if you have a TreeView that has headers, which can be dragged and dropped and pasted as text, as well as Images you wish to have inserted in the document, you can do that in the following way:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)

{

    RadTreeViewItem treeViewItem = e.Options.Source as RadTreeViewItem;

    if (e.Options.Status == DragStatus.DragQuery)

    {

        e.Options.Payload = treeViewItem.Item;

        if (treeViewItem.Item is EditableHeaderedItemsControl) //You cannot have images as DragCues

        {

            TextBlock block = new TextBlock()

            {

                Text = treeViewItem.Header.ToString()

            };

            e.Options.DragCue = block;

        }

    }

    e.Handled = true;

    e.QueryResult = true;

}

And then, in the OnDropInfo method:

private void OnDropInfo(object sender, DragDropEventArgs e)

{

   // Add a marker to be shown while draggin if you like, as shown in the demo

   if (e.Options.Status == DragStatus.DropComplete)

    {

        RadRichTextBox rrtb = e.Options.Destination as RadRichTextBox;

        Point viewPoint = e.Options.RelativeDragPoint;

        DocumentPosition pos = rrtb.ActiveEditorPresenter.GetDocumentPositionFromViewPoint(viewPoint);

        rrtb.Document.CaretPosition.MoveToPosition(pos);

        if (e.Options.Payload is Image)

        {

            Image payload = e.Options.Payload as Image;

            rrtb.InsertInline(new ImageInline(new WriteableBitmap(payload.Source as BitmapSource)));

        }

        else

        {

            Span span = new Span(((RadTreeViewItem)e.Options.Payload).Header.ToString());

            rrtb.Document.InsertInline(span);

        }

    }

}

I hope that helps.
All the best,
Iva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Angeli

29 posts

Member since:
Apr 2011

Posted 12 May 2011 Link to this post

Thanks for clearing that up Iva. To think I have to add only 2 lines of code compared to the ones I wrote. Thanks!

RichTextBox loses contents on drag&drop

Andrew

Andrew

Angeli

Andrew

Angeli

Iva Toteva

Angeli

Angeli

Ivailo Karamanolev

Angeli

Angeli

Iva Toteva

Angeli