This is a migrated thread and some comments may be shown as answers.
Tables with different number of columns get merged
1 Answer 2 Views
This is a migrated thread and some comments may be shown as answers.
Irina
Top achievements
Rank 1
Irina asked on 18 Feb 2021, 04:58 PM

Hi,

I am adding three tables one after another. Each table has different number of columns from one to three. I like every table have 100% width. All cells should have equal width (100% for table where row has one cell, 50% for table with two cells)
Tables gets merged together, instead of three tables I am getting one table with three rows. Cells gets wrong width. Row with one cell doesn’t have 100% width.

If I add empty paragraph between tables then all three tables get 100% width, but I am getting extra row between tables. Please take a look on the attached picture. First three tables get merged into one table with three rows. The rest of the tables have correct formatting but they do have extra row in-between. 

Here is code:

 

private RadFlowDocument CreateDocument()
{
var document = new RadFlowDocument();

var tableStyle = new Style("TableStyle", StyleType.Table)
{
Name = "Table Style No Borders"
};
tableStyle.TableProperties.Borders.LocalValue = new TableBorders(new Border(BorderStyle.Single));

tableStyle.TableProperties.Alignment.LocalValue = Alignment.Left;
tableStyle.TableCellProperties.VerticalAlignment.LocalValue = VerticalAlignment.Top;

document.StyleRepository.Add(tableStyle);


var editor = new RadFlowDocumentEditor(document);

//TABLE 1 WITH 3 CELLS
var table1 = AddTable(tableStyle, editor);
var row1 = AddTableRow(table1, 3);

AddParagraphMoveEditor(editor, row1, 0);
editor.InsertText("LOGO: ").FontWeight = FontWeights.Bold;

AddParagraphMoveEditor(editor, row1, 1);
editor.InsertText("Quotation Detail");

AddParagraphMoveEditor(editor, row1, 2);
editor.InsertText(DateTime.Now.ToString("MMMM d, yyyy h:m"));

editor.MoveToTableEnd(table1);

//TABLE 2 WITH 2 CELLS
var table2 = AddTable(tableStyle, editor);
var row2 = AddTableRow(table2, 2);

AddParagraphMoveEditor(editor, row2, 0);
editor.InsertText("Customer: ").FontWeight = FontWeights.Bold;

AddParagraphMoveEditor(editor, row2, 1);
editor.InsertText("Quotation No: ").FontWeight = FontWeights.Bold;

editor.MoveToTableEnd(table2);

//TABLE 3 WITH 1 CELL
var table3 = AddTable(tableStyle, editor);
var row3 = AddTableRow(table3, 1);
AddParagraphMoveEditor(editor, row3, 0);

editor.InsertText("Location: ").FontWeight = FontWeights.Bold;
editor.InsertText("location goes here");

editor.MoveToTableEnd(table3);
editor.InsertText("");


//TABLE 4 WITH 3 CELLS
var table4 = AddTable(tableStyle, editor);
var row4 = AddTableRow(table4, 3);

AddParagraphMoveEditor(editor, row4, 0);
editor.InsertText("LOGO: ").FontWeight = FontWeights.Bold;

AddParagraphMoveEditor(editor, row4, 1);
editor.InsertText("Quotation Detail");

AddParagraphMoveEditor(editor, row4, 2);
editor.InsertText(DateTime.Now.ToString("MMMM d, yyyy h:m"));

editor.MoveToTableEnd(table4);
editor.InsertText("");

//TABLE 5 WITH 2 CELLS
var table5 = AddTable(tableStyle, editor);
var row5 = AddTableRow(table5, 2);

AddParagraphMoveEditor(editor, row5, 0);
editor.InsertText("Customer: ").FontWeight = FontWeights.Bold;

AddParagraphMoveEditor(editor, row5, 1);
editor.InsertText("Quotation No: ").FontWeight = FontWeights.Bold;

editor.MoveToTableEnd(table5);
editor.InsertText("");

//TABLE 6 WITH 1 CELL
var table6 = AddTable(tableStyle, editor);
var row6 = AddTableRow(table6, 1);
AddParagraphMoveEditor(editor, row6, 0);

editor.InsertText("Location: ").FontWeight = FontWeights.Bold;
editor.InsertText("location goes here");

editor.MoveToTableEnd(table3);


return document;


private static Table AddTable(Style tableStyleNoBorders, RadFlowDocumentEditor editor)
{

var table = editor.InsertTable();

table.PreferredWidth = new TableWidthUnit(TableWidthUnitType.Percent, 100);
table.StyleId = tableStyleNoBorders.Id;

return table;
}

private TableRow AddTableRow(Table table, int cells)
{
var row = table.Rows.AddTableRow();
var cellWidth = 100 / cells;

for (int i = 0; i < cells; i++)
{
var cell = row.Cells.AddTableCell();
cell.PreferredWidth = new TableWidthUnit(TableWidthUnitType.Percent, cellWidth);
}

return row;
}

private void AddParagraphMoveEditor(RadFlowDocumentEditor editor, TableRow row, int cellNumber)
{
var cellParagraph = row.Cells[cellNumber].Blocks.AddParagraph();
editor.MoveToParagraphStart(cellParagraph);

}

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 19 Feb 2021, 09:53 AM

Hi Irina,

You need to separate the tables by inserting a paragraph. The following example shows how you can reduce the space as well: 

editor.MoveToTableEnd(table1);

var par = editor.InsertParagraph();
par.Spacing.SpacingAfter = 0;
par.Spacing.LineSpacing = 0;
par.Spacing.LineSpacingType = HeightType.Exact;

This works the same way in MS Word. If you are between two tables and the paragraph is deleted the tables will be merged. 

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Irina
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or