Edit this page

Table

The RadRichTextBox is capable of displaying and editing tables. You can use one of the following approaches to add or modify a table:

Using the RadRichTextBox API

Creating a Table Programmatically

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 from the RadDocument. The methods exposed by the API can be wired to a UI and get executed upon user interaction with this UI.

Example 1: Create a Table in Code-Behind

RadDocument document = new RadDocument();
Section section = new Section();

Table table = new Table();
table.StyleName = RadDocumentDefaultStyles.DefaultTableGridStyleName;

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(new Paragraph());
section.Blocks.Add(table);
section.Blocks.Add(new Paragraph());
document.Sections.Add(section);

this.radRichTextBox.Document = document;
Dim document As New RadDocument()
Dim section As New Section()
section.Blocks.Add(New Paragraph())

Dim table As New Table()
table.StyleName = RadDocumentDefaultStyles.DefaultTableGridStyleName

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)
section.Blocks.Add(New Paragraph())
document.Sections.Add(section)

Me.radRichTextBox.Document = document

Figure 1 shows the result of the code in Example 1.

Figure 1: Table generated in code-behind

Rad Rich Text Box Features Layout Elements Tables 01

You can obtain an existing table from the document using the EnumerateChildrenOfType() method as demonstrated in Example 2. For more information about how to select a table, please check this article.

Example 2: Get a Table from RadDocument

Table table = this.radRichTextBox.Document.EnumerateChildrenOfType<Table>().First();
Dim table As Table = Me.radRichTextBox.Document.EnumerateChildrenOfType(Of Table)().First()

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. Has an overload that allows you to specify if a Paragraph should be inserted before the table.

In versions earlier than Q1 2015 before and after each Table element is inserted a Paragraph. When the Table is inserted via the UI or the InsertTable() method this is done automatically, otherwise paragraphs should be inserted manually. In next versions the Paragraph before the Table is not mandatory.

  • InsertTableColumn: Inserts a column at the end of the table.

  • 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 of the table.

  • InsertTableRowAbove: Inserts a row above the selected one.

  • InsertTableRowBelow: Inserts a row below the selected one.

Formatting a Table at Runtime

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

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

  • ChangeTableBorders: Modifies the borders of the currently selected table via a TableBorders object.

    Example 3: Change Table Borders

        Border leftBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.Single, Colors.Red);
        Border topBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.Dashed, Colors.Red);
        Border rightBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.Dotted, Colors.Red);
        Border bottomBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.DotDotDash, Colors.Red);
        Border insideHorizontalBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.Double, Colors.Red);
        Border insideVerticalBorder = new Telerik.Windows.Documents.Model.Border(BorderStyle.DotDash, Colors.Red);
    
        TableBorders borders = new TableBorders(leftBorder, topBorder, rightBorder, bottomBorder, insideHorizontalBorder, insideVerticalBorder);
        this.radRichTextBox.ChangeTableBorders(borders);
    
        Dim leftBorder As New Border(BorderStyle.[Single], Colors.Red)
        Dim topBorder As New Border(BorderStyle.Dashed, Colors.Red)
        Dim rightBorder As New Border(BorderStyle.Dotted, Colors.Red)
        Dim bottomBorder As New Border(BorderStyle.DotDotDash, Colors.Red)
        Dim insideHorizontalBorder As New Border(BorderStyle.[Double], Colors.Red)
        Dim insideVerticalBorder As New Border(BorderStyle.DotDash, Colors.Red)
    
        Dim borders As New TableBorders(leftBorder, topBorder, rightBorder, bottomBorder, insideHorizontalBorder, insideVerticalBorder)
        Me.radRichTextBox.ChangeTableBorders(borders)        
    
  • ChangeTableCellBackground: Sets the background color of the currently selected cell.

  • ChangeTableCellBorders: Modifies the borders of the currently selected table via a TableCellBorders or a Border object.

  • ChangeTableCellSpacing: Modifies the spacing between the cells.

  • ChangeTableCellContentAlignment: Modifies the horizontal and vertical content alignment of the currently selected cell.

    Example 4: Change Table Cell Content Alignment

        this.radRichTextBox.ChangeTableCellContentAlignment(RadTextAlignment.Center, RadVerticalAlignment.Center);
    
        Me.radRichTextBox.ChangeTableCellContentAlignment(RadTextAlignment.Center, RadVerticalAlignment.Center)
    
  • ChangeTableCellVerticalContentAlignment: Modifies the vertical alignment of the currently selected cell.

  • ChangeTableCellHorizontalContentAlignment: Modifies the horizontal alignment of the currently selected cell.

  • ChangeTableCellPadding: Modifies the padding of the currently selected cell.

  • ChangeTableDefaultCellPadding: Modifies the default cell padding of the currently selected table.

  • ChangeTableLayoutMode: Modifies the layout mode of a table.

    Example 5: Change Table Layout Mode

        this.radRichTextBox.ChangeTableLayoutMode(table, TableLayoutMode.Fixed);
    
        Me.radRichTextBox.ChangeTableLayoutMode(table, TableLayoutMode.Fixed)
    
  • ChangeTableHorizontalAlignment: Modifies the horizontal alignment of the currently selected table.

  • ChangeTableGridColumnWidth: Modifies the width of the column with the specified zero-based index.

    Example 6: Change the Width of a Table Column

         this.radRichTextBox.ChangeTableGridColumnWidth(table, 3, new TableWidthUnit(TableWidthUnitType.Fixed, 12));
    
        Me.radRichTextBox.ChangeTableGridColumnWidth(table, 3, New TableWidthUnit(TableWidthUnitType.Fixed, 12))
    
  • ChangeTableRowHeight: Changes the height of a table row.

    Example 7: Change the Height of a Table Row

        this.radRichTextBox.ChangeTableRowHeight(table.Rows.First, 35.5);
    
        Me.radRichTextBox.ChangeTableRowHeight(table.Rows.First, 35.5)
    
  • MergeTableCells: Merges the currently selected cells.

  • UnmergeTableCells: Splits the currently selected table cell if it has been merged.

  • ChangeTableRowRepeatOnEveryPage: Changes whether the row is repeated header row and applies the row’s style if necessary. More information about this functionality is available here.

Using the Built-in UI

Creating a Table

You can enable the user to create a table via the built-in UI of the RadRichTextBox. This is done by using the RadRichTextBoxRibbonUI, which exposes two different ways of creating a table by selection in the UI or on button click. To learn more about how to use the RadRichTextBoxRibbonUI read this topic.

Rad Rich Text Box Features Layout Elements Tables 02

You can also 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.

The RadRichTextBoxUI also uses this dialog.

Rad Rich Text Box Features Layout Elements Tables 04

A table could be deleted or modified via the Table Tools’ contextual tab Layout. There are UI buttons for each of the API methods used for deleting and modifying a table.

Rad Rich Text Box Features Layout Elements Tables 03

Formatting a Table

You can enable the user to modify a table via the built-in UI of the RadRichTextBox. This is done by using the RadRichTextBoxRibbonUI, which exposes a Table Tools contextual menu with two tabs – Design and Layout. They expose UI buttons for all API methods used for formatting and modifying a table. To learn more about how to use the RadRichTextBoxRibbonUI read this topic.

Rad Rich Text Box Features Layout Elements Tables 05

The Design contextual tab allows you to use a predefined set of formatting options called Table styles. The TableStylesGallery offers a way to easily create, delete, modify and apply table styles in a document. To learn more about how to use the TableStylesGallery read this topic.

Rad Rich Text Box Features Layout Elements Tables 07

Additionally, the built-in context menu of the RadRichTextBox gives the user the possibility to open the Table Properties and Table Borders dialogs.

Rad Rich Text Box Features Layout Elements Tables 06

To wire these dialogs to your own UI you can use the ShowTablePropertiesDialog() method of RadRichTextBox or the ShowTablePropertiesCommand.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy