Edit this page
Available for: UI for ASP.NET AJAX | UI for ASP.NET MVC | UI for WPF | UI for WinForms

Table

Table element is a Block element that provides a grid-based organization. It accepts TableRow objects as children. The TableRow object contains TableCell.

Inserting a Table

When creating an instance of the Table class, you should pass the document that the table belongs to as a parameter to the constructor. Tables can be added as a child of a BlockContainer element – Section, TableCell, Headers and Footers, through the Blocks collection.

The code snippet from Example 1 creates and inserts a Table to a Section.

[C#] Example 1: Create and insert a table to a section

Table emptyTable = new Table(document); // Table object with 0 rows and 0 columns.
section.Blocks.Add(emptyTable);

Table table = new Table(document, 10, 5); // Table object with 10 rows and 5 columns.
section.Blocks.Add(emptyTable);

The parent BlockContainer element (in this case - the section) should belong to the same document that is passed to the constructor of the Table.

You can add a table at a specific index in the Blocks collection of a BlockContainer using the Insert() method. Example 2 shows how to add a table at the beginning of a section.

[C#] Example 2: Insert a table at a specific index

Table table = new Table(document, 10, 5);
section.Blocks.Insert(0, table);

You can also use the AddTable() method of the Blocks collection of a BlockContainer. The method creates a new Table instance, adds it to the container and returns it.

[C#] Example 3: Insert a new table to a container

Table table = section.Blocks.AddTable();

Inserting a new Table in the document can also be achieved with the RadFlowDocumentEditor class.

[C#] Example 4: Insert a table using RadFlowDocumentEditor

RadFlowDocumentEditor editor = new RadFlowDocumentEditor(new RadFlowDocument());
Table table = editor.InsertTable(5, 3);

Modifying a Table

Properties exposes several properties that allow you to customize the layout of the elements placed underneath it. A part of these properties are Style properties and some of the values represent a themable object.

Style properties are properties that can be inherited from a style. For more information about styles see this article.

Themable objects are objects that can be inherited from a theme. For more information about themes check this article.

  • Properties: Gets all table properties as TableProperties object. More info on how to use table properties can be found in Style Properties article.

  • Rows: Represents TableRowCollection of the Table.

  • StyleId: Represents the ID of the style applied to the Table element.

  • Alignment: Specifies the alignment of the Table. This is a Style property.

  • Borders: Specifies the borders of the Table. This is a Style property.

  • Shading: Represents the shading applied to the table. It is a composite object and is read-only. You can obtain the following properties from it:

    • BackgroundColor: Specifies the background color for the shading. This is a Style property. The value is themable object.
    • PatternColor: Specifies the pattern color for the shading. This is a Style property. The value is themable object.
    • Pattern: Specifies the pattern which is used to lay the pattern color over the background color for the shading. This is a Style property.
  • GridColumnsCount: Returns the number of the columns in the table grid.

  • GridRowsCount: Returns the number of the rows in the table grid.

  • TableCellSpacing: Specifies the spacing between adjacent cells and the edges of the table.The value is in device independent pixels (1/96 inch). This is a Style property.

  • HasCellSpacing: Indicates whether there is TableCellSpacing applied in the table.

  • TableCellPadding: Specifies the default padding of the cells inside the table. This is a Style property.

  • Indent: Represents the size of the indent added before the leading edge of the table.The value is in device independent pixels (1/96 inch). This is a Style property.

  • FlowDirection: Represents the flow direction of cells inside the table. The default value is LeftToRight. This property cannot be derived from a style.

  • PreferredWidth: Specifies the preferred width of the table. This property cannot be derived from a style.

  • Looks: Specifies the value indicating which components of the conditional style should be applied if such exists. This property cannot be derived from a style.

  • LayoutType: Specifies the algorithm which is used to lay out the contents of this table. The possible values are FixedWidth or AutoFit. The default is AutoFit. This property cannot be derived from a style.

  • Overlap: Indicates whether this floating table allows other floating tables to overlap its extents. This property cannot be derived from a style.

Operating with a Table

Creating a Table with Content

Example 5 demonstrates how to add a Table with 5 rows and 10 columns to a RadFlowDocument.

[C#] Example 5: Create a table with content and add it to a RadFlowDocument

RadFlowDocument document = new RadFlowDocument();

Table table = document.Sections.AddSection().Blocks.AddTable();
document.StyleRepository.AddBuiltInStyle(BuiltInStyleNames.TableGridStyleId);
table.StyleId = BuiltInStyleNames.TableGridStyleId;

ThemableColor cellBackground = new ThemableColor(Colors.Beige);

for (int i = 0; i < 5; i++)
{
    TableRow row = table.Rows.AddTableRow();

    for (int j = 0; j < 10; j++)
    {
        TableCell cell = row.Cells.AddTableCell();
        cell.Blocks.AddParagraph().Inlines.AddRun(string.Format("Cell {0}, {1}", i, j));
        cell.Shading.BackgroundColor = cellBackground;
        cell.PreferredWidth = new TableWidthUnit(50);
    }
}

See Also