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

Responsive document

6 Answers 159 Views
RichTextEditor
This is a migrated thread and some comments may be shown as answers.
Nicklas
Top achievements
Rank 1
Nicklas asked on 22 Nov 2018, 01:53 PM

Hello, we are currently in a final stage of our CRM development, and are using the control by importing a .docx file. Our problem now is we can't seem to make the content of the control reponsive. It works fine on the resolution our resolution, but when we go lower than that, it will look like the attached file.

 

Any solution to make the conrol work with lower resolutions too?

 

Thanks in advance

 

6 Answers, 1 is accepted

Sort by
0
Nicklas
Top achievements
Rank 1
answered on 22 Nov 2018, 02:57 PM
I solved the problem with docking and flow layout.
0
Hristo
Telerik team
answered on 23 Nov 2018, 08:57 AM
Hello Nicklas,

I am glad that you managed to achieve the desired behavior in your project. We are not aware, however, of an issue in the editor which could result in an unresponsive document. If you would like us to investigate this please open a support ticket and send us the document so that we can test it on our end.

Regards,
Hristo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nicklas
Top achievements
Rank 1
answered on 23 Nov 2018, 12:17 PM

I did achieve the desired behavior. The text is now resonsive, however we want to scale the images in the imported .docx document to fit the images to the avavible space in the document. How can we archieve that?

 

Thanks in advance

0
Hristo
Telerik team
answered on 26 Nov 2018, 09:31 AM
Hello Nicklas,

After loading the document, you can enumerate the ImageInline elements and scale them according to the actual page size: 
private void ScaleImages()
{
    IEnumerable<ImageInline> images = this.radRichTextEditor1.Document.EnumerateChildrenOfType<ImageInline>();
    foreach (ImageInline image in images)
    {
        Telerik.WinControls.RichTextEditor.UI.Size size = this.GetScaledSize(image.Width, image.Height);
        image.Size = size;
    }
}
 
private Telerik.WinControls.RichTextEditor.UI.Size GetScaledSize(double originalPixelWidth, double originalPixelHeight)
{
    Telerik.WinForms.Documents.Layout.Padding sectionmargin = this.radRichTextEditor1.Document.CaretPosition.GetCurrentSectionBox().AssociatedSection.ActualPageMargin;
    if (originalPixelWidth == 0 || originalPixelHeight == 0)
    {
        originalPixelWidth = 10;
        originalPixelHeight = 10;
    }
 
    double width = originalPixelWidth;
    double height = originalPixelHeight;
 
    Section currentSection = this.radRichTextEditor1.Document.CaretPosition.GetCurrentSectionBox().AssociatedSection;
    Telerik.WinForms.Documents.Model.SizeF pageSize = (Telerik.WinForms.Documents.Model.SizeF)currentSection.GetType()
        .GetProperty("ActualPageSize", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic).GetValue(currentSection);
 
    double maxWidth = pageSize.Width - (sectionmargin.Left + sectionmargin.Right);
    double maxHeight = pageSize.Height - (sectionmargin.Top + sectionmargin.Bottom);
    width = Math.Min(maxWidth, width);
    height = Math.Min(maxHeight, height);
 
    double ratio = originalPixelWidth / originalPixelHeight;
    width = Math.Min(width, height * ratio);
    height = width / ratio;
 
    return new Telerik.WinControls.RichTextEditor.UI.Size(width, height);
}

I hope this will help.

Regards,
Hristo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nicklas
Top achievements
Rank 1
answered on 26 Nov 2018, 10:44 AM

Hm, this just seems to scale the image to a specific size if the image does not fit in the document. The images now looks like the ones shown in the attached file. What I want, is to scale the dimensions of the images as less as possiple, but just enough to fit into the document. 

 

Thanks in advance

0
Hristo
Telerik team
answered on 27 Nov 2018, 11:52 AM
Hi Nicklas,

The ScaleImages can be used if you are having the control setup in Paged layout mode and it will change the size of the elements so that they can fit the page. If you are using the editor in Flow mode the images will be displayed in their original size. Please also note that the desired behavior is not built-in.

Regards,
Hristo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
RichTextEditor
Asked by
Nicklas
Top achievements
Rank 1
Answers by
Nicklas
Top achievements
Rank 1
Hristo
Telerik team
Nicklas
Top achievements
Rank 1
Share this question
or