This is a migrated thread and some comments may be shown as answers.

Displaying Custom UI Controls in Margin

4 Answers 108 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Marcel
Top achievements
Rank 1
Marcel asked on 07 Dec 2011, 09:34 AM
After using the comments functionality I was wondering if its possible to display your own custom UI controls within the margin of the richtextdocument? If so, is there a simple example available.

Thanks 

4 Answers, 1 is accepted

Sort by
0
Marcel
Top achievements
Rank 1
answered on 09 Dec 2011, 12:15 PM
I managed to get a couple control inserted into the document using: 

public void InsertMedia()
		{

InlineUIContainer container = new InlineUIContainer()
			{
				UiElement = mycustomUIElement
			};
 
			container.Height = 60;
			container.Width = 100;
 
			RadRichTextDocument.InsertComment(container);
}

So know i need to know how to position this into the document margin?
0
Iva Toteva
Telerik team
answered on 12 Dec 2011, 04:23 PM
Hello Chez,

As you have found out, InlineUIContainers can be used to insert custom controls in RadDocument. More information on these document elements can be found here.
When it comes to your second questions, I am not quite sure I understand it.

If you want to add the InlineUIContainers in the comments of the document, you have to create a RadDocument instance, which contains this InlineUIContainer, create a Comment and insert it in the main document. You seem to have managed to implement this scenario, judging from this forum post.

If you want to have UIElements in the margins of the document and not with the normal flow of content in the document, you can have a FloatingUIContainer. These elements are similar to Floating images, but can contain different UIElements. Here is an example of how a floating block can be constructed and inserted:

FloatingUIContainer floatingContainer = new FloatingUIContainer(uiElement, new Size(100, 20));
floatingContainer.WrappingStyle = WrappingStyle.BehindText;
floatingContainer.VerticalPosition = new FloatingBlockVerticalPosition(VerticalRelativeFrom.TopMargin, 0d);
floatingContainer.HorizontalPosition = new FloatingBlockHorizontalPosition(HorizontalRelativeFrom.LeftMargin, 0d);
this.editor.InsertInline(floatingContainer);

I hope this helps.

All the best,
Iva Toteva
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Marcel
Top achievements
Rank 1
answered on 12 Dec 2011, 05:34 PM
Hi thanks for the response, is there away of positioning the custom control, by line number, I.e. i specify the line that i would like it to appear next to?  Basically using bookmarks, I highlight certain text, I want to display my control inline with the bookmark text. So for this is what I do:

var bkMarkS = RadRichTextDocument.Document.GetBookmarkByName("BookmarkA1");
var bkMarkE = RadRichTextDocument.Document.GetBookmarkByName("BookmarkA2");

start = new DocumentPosition(RadRichTextDocument.Document);
end = new DocumentPosition(RadRichTextDocument.Document);
start.MoveToInline(bkMarkS.FirstLayoutBox as InlineLayoutBox, 0);
end.MoveToInline(bkMarkE.End.FirstLayoutBox as InlineLayoutBox, 0);
CustomUIControl MyUIControl new CustomUIControl();

FloatingUIContainer floatingContainer = new FloatingUIContainer (MyUIControl new Size(100, 20));
floatingContainer.WrappingStyle = WrappingStyle.Square;
floatingContainer.VerticalPosition = new FloatingBlockVerticalPosition(VerticalRelativeFrom.TopMargin, start.GetCurrentInlineBox().BoundingRectangle.Location.Y);
floatingContainer.HorizontalPosition = new FloatingBlockHorizontalPosition(HorizontalRelativeFrom.RightMargin, 0d);
RadRichTextDocument.Document.InsertInline(floatingContainer);

But sometimes, it doesn't line the control up properly with the Text within the document.

Is there a better way of doing this?

Thanks Again.
0
Boby
Telerik team
answered on 16 Dec 2011, 01:05 PM
Hi Chez,
Your code seems valid as long as it fits your needs; so could you please send us (though a support ticket) the problematic documents, and eventually some steps to reproduce the behavior.
You could consider some other options as well:
  • Insert the UI element directly in the comment's document body:
    TextBlock textBlock = new TextBlock() { Text = "Some Text"};
     
    InlineUIContainer uiContainer = new InlineUIContainer(textBlock, new Size(75, 23));
    Paragraph paragraph = new Paragraph();
    paragraph.Inlines.Add(uiContainer);
    Section section = new Section();
    section.Blocks.Add(paragraph);
    RadDocument commentBody = new RadDocument();
    commentBody.Sections.Add(section);
     
    this.radRichTextBox.InsertComment(new Comment(commentBody));
Note that as UI elements cannot be fully serialized, you will observe exceptions on copy/pasting regions containing comments. We can provide with a workaround (which customizes the paste command to stop copy UI containers) if you choose this way.
  • You can change comments template, as demonstrated in the attached project.

Don't hesitate to contact us if you need further help.


Greetings,
Boby
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
RichTextBox
Asked by
Marcel
Top achievements
Rank 1
Answers by
Marcel
Top achievements
Rank 1
Iva Toteva
Telerik team
Boby
Telerik team
Share this question
or