Set image to fit table cell

6 posts, 1 answers
  1. Remus
    Remus avatar
    15 posts
    Member since:
    Jan 2020

    Posted 06 May Link to this post

    Hi,

    I am trying to add a image in a table cell so that the width of the image is equal to the width of the cell. The PreferredWidth of the cell is set in percentage. I use the following function to get the width of the cell in pixels:

    private float GetTableCellwidthInPixels(Table parent, int index) {
                var section = parent.GetRootDocument().EnumerateChildrenOfType<Section>().Last();
                var pageWidth = section.PageSize.Width;
     
                return (float)parent.GetGridColumnWidth(index).Calculate((float)pageWidth);
            }

    This works fine if the total preferred widths of all cells on a row is less or equal to 80. If they are larger than 80 the image gets larger than the cell. If I subtract the page margins from the width:

    var pageWidth = section.PageSize.Width - section.PageMargin.Horizontal;

    the image is always smaller than the cell.

    I am doing all this processing before the document is added to the radRichTexBox, so the document is unmeasured.

     

    Any idea why this happens?

     

  2. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 07 May Link to this post

    Hello Remus,

    Can you send me the entire code that you are using to create the table? This will give me a better understanding of your exact case. 

    In general, I would suggest inserting the image after the document is measured and the table is shown. I have tested this and it seems to work on my side. Here is the code I have used to test this: 

    private void radButton_Click(object sender, RoutedEventArgs e)
    {
        var tables = radRichTextBox.Document.EnumerateChildrenOfType<Table>();
        var table = tables.First();
        var width0 = GetTableCellwidthInPixels(radRichTextBox.Document, table, 0);
        // var width1 = GetTableCellwidthInPixels(document, table , 1);
    
        using (FileStream fs = new FileStream(@"..\..\logo.png", FileMode.Open))
        {
            var size = new Size(width0, 100);
    
            ImageInline image = new ImageInline(fs, size, "png");
            var p = table.Rows.First().Cells.First().Blocks.First() as Paragraph;
            radRichTextBox.Document.CaretPosition.MoveToInline(p.Inlines.FirstOrDefault());
            var editor = new RadDocumentEditor(radRichTextBox.Document);
    
            editor.InsertInline(image);
        }
    }
    private float GetTableCellwidthInPixels(RadDocument document, Table table, int index)
    {
        var section = document.EnumerateChildrenOfType<Section>().Last();
        var pageWidth = section.PageSize.Width - section.PageMargin.Horizontal;
    
        return (float)table.GetGridColumnWidth(index).Calculate((float)pageWidth);
    }
    

    I am looking forward to your reply.

    Regards,
    Dimitar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Remus
    Remus avatar
    15 posts
    Member since:
    Jan 2020

    Posted 07 May in reply to Dimitar Link to this post

    Hi Dimitar,

    Let me give you a bit more context on what I am trying to do. I am creating a report as a read only document from a macro given by the user. Because of how the code is organised I can't insert the image after the document is measured. 

    This is how I create the table: 

    var table = new Table();
    table.TableLook.ApplyFirstRow = false;
     
    //Command.ColumnFormater is where information about the table columns is saved from the macro
    for (int i = 0; i < Command.ColumnFormatter.NumberOfColumns; i++) {
                    var column = new TableGridColumn();
                    column.PreferredWidth = new TableWidthUnit(TableWidthUnitType.Percent, Command.ColumnFormatter.ColumnWidths[i]);
                    table.Grid.Columns.Add(column);
                }
     
    //AddToParent is a custom function that in this case will add the table to a section
                AddToParent(ref parent, table, anchor, addAtStart);
     
                var margin = new Paragraph();
                margin.StyleName = "";
                margin.SpacingAfter = 0;
                AddToParent(ref parent, margin, anchor, addAtStart);
     
                return table;

     

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 08 May Link to this post

    Hello Remus,

    I have tested this and it works on my side. I have attached my test project. Could you please check it and let me know how it differs from your real setup? 

    I am looking forward to your reply.

    Regards,
    Dimitar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Remus
    Remus avatar
    15 posts
    Member since:
    Jan 2020

    Posted 11 May Link to this post

    Hi Dimitar,

    It seams that the problem was that later on in the code I was applying a stylesheet to the document that was changing the size of the page and because of that the image was scaled after the incorrect page size.

    Thanks for the help!

  6. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 11 May Link to this post

    Hi Remus,

    I am glad that you have found a solution to this. Do not hesitate to contact us if you have other questions.

    Regards,
    Dimitar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top