ContextQMD
Back to Devexpress

TableWidthType Enum

blazor-devexpress-dot-blazor-dot-richedit-71c8a9c4.md

latest7.7 KB
Original Source

TableWidthType Enum

Lists values that specify how the component determines the table or cell width.

Namespace : DevExpress.Blazor.RichEdit

Assembly : DevExpress.Blazor.RichEdit.v25.2.dll

NuGet Package : DevExpress.Blazor.RichEdit

Declaration

csharp
public enum TableWidthType

Members

NameDescription
Auto

The TableWidth.Value property does not affect the table or cell width. The width is calculated automatically based on content.

| | Percent |

The TableWidth.Value property specifies the cell or table width as a percentage of the parent element’s width.

| | Twips |

The TableWidth.Value property specifies the cell or table width in twips.

|

The following properties accept/return TableWidthType values:

Remarks

Use the Table.Width or TableCell.Width property to identify the table or cell width. Call the Table.ChangePropertiesAsync or TableCell.ChangePropertiesAsync method to change the following width settings of the table or cell:

Width.ValueSpecifies the table or cell width value.Width.TypeSpecifies how the component determines the table or cell width. The following options are available:

  • Auto – The TableWidth.Value property does not affect the table or cell width. The width is calculated automatically based on content.
  • Percent – The TableWidth.Value property specifies the cell or table width as a percentage of the parent element’s width.
  • Twips – The TableWidth.Value property specifies the cell or table width in twips.

A table can automatically adjust its width to fit content. Use the Table.AutoFit property to identify whether size adjustment is enabled. Set the TableProperties.AutoFit property to false to disable automatic table width adjustment.

Note

  • If you set different widths for cells in the same column, the largest cell determines the resulting column width.
  • The table width has priority over individual cell widths. The table always keeps its explicitly specified width regardless of the sum of individual cell widths.

Adjust Width to Content

The following code example adjusts a table’s width according to content:

razor
<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            try {
                await InitializeDocument();
            }
            catch (TaskCanceledException) { }
        await base.OnAfterRenderAsync(firstRender);
    }

    async Task InitializeDocument() {
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            var columnCount = 4;
            var rowCount = 5;
            richEdit.DocumentAPI.BeginUpdate();
            // Creates a table
            Table firstTable = await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
            for (int i = firstTable.Rows.Count - 1; i >= 0 ; i--)
                for (int j = firstTable.Rows[i].Cells.Count - 1; j >= 0 ; j--) {
                    var cellPosition = firstTable.Rows[i].Cells[j].Interval.Start;
                    await richEdit.DocumentAPI.AddTextAsync(cellPosition, "sample text");
            }
            // Customizes the table
            await firstTable.ChangePropertiesAsync(properties => {
                properties.AutoFit = true;
                properties.Width.Type = TableWidthType.Auto;
            });
            foreach (TableRow row in firstTable.Rows) 
                foreach (TableCell cell in row.Cells)
                    await cell.ChangePropertiesAsync(properties => {
                        properties.Width.Type = TableWidthType.Auto;
                    });
            richEdit.DocumentAPI.EndUpdate();
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
    }
}

Fixed Table Width

The following code snippet resizes a table as follows:

  • Sets the full table width to match the page width
  • Sets the first column’s width equal to half of the full table width

razor
<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            try {
                await InitializeDocument();
            }
            catch (TaskCanceledException) { }
        await base.OnAfterRenderAsync(firstRender);
    }

    async Task InitializeDocument() {
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            var columnCount = 4;
            var rowCount = 5;
            richEdit.DocumentAPI.BeginUpdate();
            // Creates a table
            Table firstTable = await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
            for (int i = firstTable.Rows.Count - 1; i >= 0 ; i--)
                for (int j = firstTable.Rows[i].Cells.Count - 1; j >= 0 ; j--) {
                    var cellPosition = firstTable.Rows[i].Cells[j].Interval.Start;
                    await richEdit.DocumentAPI.AddTextAsync(cellPosition, "sample text");
            }
            // Customizes the table
            await firstTable.ChangePropertiesAsync(properties => {
                properties.AutoFit = false;
                properties.Width = new TableWidth(TableWidthType.Percent, 100);
            });
            foreach (TableRow row in firstTable.Rows) {
                await row.Cells[0].ChangePropertiesAsync(properties => {
                    properties.Width = new TableWidth(TableWidthType.Percent, 50);
                });
            }
            richEdit.DocumentAPI.EndUpdate();
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
    }
}

See Also

Tables in Blazor Rich Text Editor

DevExpress.Blazor.RichEdit Namespace