Edit this page

Tables

The RadRichTextBox is capable of displaying tables. To add a table to the document you can use the provided API.

The tables inside the RadRichTextBox are constructed using the Table, TableRow and TableCell classes. The defining of a table is very similar to the one in HTML. The Table class define the table itself and it accepts TableRow objects as children. The TableRow on its hand accepts TableCell objects as children. The TableCell accepts Block elements as children, so to specify its contents of a cell use such one (e.g. a Paragraph) to wrap it.

note

Tables are block elements.

Here is a simple example.

Section section = new Section();
Table table = new Table();
TableRow row1 = new TableRow();
TableCell cell1 = new TableCell();
Paragraph p1 = new Paragraph();
Span s1 = new Span();
s1.Text = "Cell 1";
p1.Inlines.Add(s1);
cell1.Blocks.Add(p1);
row1.Cells.Add(cell1);
TableCell cell2 = new TableCell();
Paragraph p2 = new Paragraph();
Span s2 = new Span();
s2.Text = "Cell 2";
p2.Inlines.Add(s2);
cell2.Blocks.Add(p2);
row1.Cells.Add(cell2);
table.Rows.Add(row1);
TableRow row2 = new TableRow();
TableCell cell3 = new TableCell();
cell3.ColumnSpan = 2;
Paragraph p3 = new Paragraph();
Span s3 = new Span();
s3.Text = "Cell 3";
p3.Inlines.Add(s3);
cell3.Blocks.Add(p3);
row2.Cells.Add(cell3);
table.Rows.Add(row2);
section.Blocks.Add(table);
this.radRichTextBox1.Document.Sections.Add(section);

Dim _section As New Section()
Dim _table As New Table()
Dim row1 As New TableRow()
Dim cell1 As New TableCell()
Dim p1 As New Paragraph()
Dim s1 As New Span()
s1.Text = "Cell 1"
p1.Inlines.Add(s1)
cell1.Blocks.Add(p1)
row1.Cells.Add(cell1)
Dim cell2 As New TableCell()
Dim p2 As New Paragraph()
Dim s2 As New Span()
s2.Text = "Cell 2"
p2.Inlines.Add(s2)
cell2.Blocks.Add(p2)
row1.Cells.Add(cell2)
_table.Rows.Add(row1)
Dim row2 As New TableRow()
Dim cell3 As New TableCell()
cell3.ColumnSpan = 2
Dim p3 As New Paragraph()
Dim s3 As New Span()
s3.Text = "Cell 3"
p3.Inlines.Add(s3)
cell3.Blocks.Add(p3)
row2.Cells.Add(cell3)
_table.Rows.Add(row2)
_section.Blocks.Add(_table)
Me.RadRichTextBox1.Document.Sections.Add(_section)

richtextbox-features-document-elements-tables 001

Additionally you can span cells in columns and rows. This is done by using the RowSpan and ColumnSpan properties of the TableCell object. Also you can specify the layout mode for the table via the LayoutMode property. it can have one of the following values:

  • Fixed - specifies that the table should have width equal to the value of its PrefferedWidth property.

  • AutoFit - specifies that the table should fit into the entire space available. This means that the table will get stretched horizontally.

tip

To learn more about the Formatting API of the RadRichTextBox , read this topic.

The RadRichTextBox exposes a rich API, which allows you to use various methods to add, modify or delete elements form the RadDocument. The methods exposed by the API can be wired to a UI and get executed upon user interaction with this UI. The RadRichTextBox exposes the following methods that regard the creation or deletion of a table:

  • DeleteTable - deletes the currently selected table.

  • DeleteTableColumn - deletes the currently selected column.

  • DeleteTableRow - deletes the currently selected row.

  • InsertTable - inserts a table. Allows you to specify the number of rows and columns.

  • InsertTableColumn - inserts a column at the end..

  • InsertTableColumnToTheLeft - inserts a column to the left of the selected one.

  • InsertTableColumnToTheRight - inserts a column to the right of the selected one.

  • InsertTableRow - inserts a row at the end.

  • InsertTableRowAbove - inserts a row above the selected one.

  • InsertTableRowBelow - inserts a row below the selected one.

Creating a Table via the Built-in UI

You can use the InsertTableDialog, which comes out of the box. To show it upon a user action just call the ShowInsertTableDialog() method of the RadRichTextBox. Here is a snapshot of it.

note

The RadRichTextBoxUI also uses this dialog.

richtextbox-features-document-elements-tables 002

Formatting a Table at Runtime via RadRichTextBox's API

tip

To learn more about the Formatting API of the RadRichTextBox, read this topic.

The RadRichTextBox exposes a rich API, which allows you to use various methods to add, modify or delete elements form the RadDocument. The methods exposed by the API can be wired to a UI and get executed upon user interaction with this UI. The RadRichTextBox exposes the following methods that regard the modifying of a table:

  • ChangeTableBorders - modifies the borders of the currently selected table via a TableBorders object.

  • ChangeTableCellBackground - sets the color of the currently selected cell's borders.

  • ChangeTableCellBorders - modifies the borders of the currently selected table via a __TableCellBorders__object.

  • ChangeTableCellContentAlignment - modifies the content alignment of the currently selected cell.

  • ChangeTableCellPadding - modifies the padding of the currently selected cell.

  • ChangeTableColumnsLayoutMode - modifies the layout mode of the table's columns.

  • ChangeTableGridColumnWidth - modifies the width of the column.

  • MergeTableCells - merges the currently selected cells.