Responsive document

7 posts, 0 answers
  1. Nicklas
    Nicklas avatar
    3 posts
    Member since:
    Jun 2017

    Posted 22 Nov 2018 Link to this post

    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

     

  2. Nicklas
    Nicklas avatar
    3 posts
    Member since:
    Jun 2017

    Posted 22 Nov 2018 Link to this post

    I solved the problem with docking and flow layout.
  3. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 23 Nov 2018 Link to this post

    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.
  4. Nicklas
    Nicklas avatar
    21 posts
    Member since:
    Feb 2016

    Posted 23 Nov 2018 in reply to Hristo Link to this post

    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

  5. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 26 Nov 2018 Link to this post

    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.
  6. Nicklas
    Nicklas avatar
    21 posts
    Member since:
    Feb 2016

    Posted 26 Nov 2018 in reply to Hristo Link to this post

    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

  7. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 27 Nov 2018 Link to this post

    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.
Back to Top