Responsive document

[Nicklas]

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

 

[Nicklas]

I solved the problem with docking and flow layout.

[Hristo]

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

[Nicklas]

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

[Hristo]

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

[Nicklas]

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

[Hristo]

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