Displaying Custom UI Controls in Margin

[Marcel]

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 

[Marcel]

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?

[Iva Toteva]

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

[Marcel]

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.

[Boby]

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