Skip to content

1045868-UG Documentation Correction MVC Platform #4295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Suriya-Murugan merged 8 commits into from
Aug 11, 2026
Merged

1045868-UG Documentation Correction MVC Platform #4295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9482e2f
1045868-changed table,text-format,text-wrapping-style,track-changes,u…
Vellaisamy5301 Aug 10, 2026
9b07c04
1045868-resolved ci issue
Vellaisamy5301 Aug 10, 2026
c2b6038
1045868-resolved duplicate heading ci issue
Vellaisamy5301 Aug 10, 2026
f346b68
1045868-addressed the review changes in heading 1
Vellaisamy5301 Aug 11, 2026
38ef902
Merge branch 'hotfix/hotfix-v34.2.2' into 1045868-mvc1
Vellaisamy5301 Aug 11, 2026
728a0a7
1045868-empty commit
Vellaisamy5301 Aug 11, 2026
8214e08
Merge branch 'hotfix/hotfix-v34.2.2' into 1045868-mvc1
Vellaisamy5301 Aug 11, 2026
6ec5418
1045868-added slash
Vellaisamy5301 Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions Document-Processing/Word/Word-Processor/asp-net-mvc/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Table in ASP.NET MVC Document Editor Component | Syncfusion
title: Table in ASP.NET MVC DOCX Editor Component | Syncfusion
description: Learn here all about table in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Table
documentation: ug
---


# Tables
# Table in ASP.NET MVC Document Editor

Tables are an efficient way to present information. Document editor can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document editor exposes a rich set of APIs to perform these operations programmatically.
Tables are an efficient way to present information. The Document Editor can display and edit tables. You can select and edit tables through keyboard, mouse, or touch interactions. It exposes a rich set of APIs to perform these operations programmatically.

## Create a table

You can create and insert a table at cursor position by specifying the required number of rows and columns.
You can create and insert a table at the cursor position by specifying the required number of rows and columns.

```typescript
documenteditor.editor.insertTable(3,3);
Expand Down Expand Up @@ -42,11 +42,11 @@ You can use the `maximumRows` property to set the maximum number of rows allowed
```


When the maximum row limit is reached, an alert will appear, as follow
When the maximum row limit is reached, an alert will appear, as follows.

![Row Limit Alert](images/Row_Limit_Alert.PNG)
![Row Limit Alert](images/Row_Limit_Alert.PNG)

>Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property.
N> The maximum number of rows is 32767, as per Microsoft Word application, and you can set any value less than or equal to 32767 to this property.

## Set the maximum number of Columns when inserting a table

Expand All @@ -72,15 +72,15 @@ Refer to the following sample code.
```


When the maximum column limit is reached, an alert will appear, as follow
When the maximum column limit is reached, an alert will appear, as follows.

![Column Limit Alert](images/Column_Limit_Alert.PNG)
![Column Limit Alert](images/Column_Limit_Alert.PNG)

>Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property.
N> The maximum number of columns is 63, as per Microsoft Word application, and you can set any value less than or equal to 63 to this property.

## Insert rows

You can add a row (or several rows) above or below the row at cursor position by using the `insertRow` method. This method accepts the following parameters:
You can add a row (or several rows) above or below the row at the cursor position by using the `insertRow` method. This method accepts the following parameters:

| Parameter | Type | Description |
|----------|------|-------------|
Expand All @@ -91,16 +91,16 @@ Refer to the following sample code.

```typescript
//Inserts a row below the row at cursor position
documentedior.editor.insertRow();
documenteditor.editor.insertRow();
//Inserts a row above the row at cursor position
documentedior.editor.insertRow(false);
documenteditor.editor.insertRow(true);
//Inserts three rows below the row at cursor position
documentedior.editor.insertRow(true, 3)
documenteditor.editor.insertRow(false, 3);
```

## Insert columns

You can add a column (or several columns) to the left or right of the column at cursor position by using the `insertColumn` method. This method accepts the following parameters:
You can add a column (or several columns) to the left or right of the column at the cursor position by using the `insertColumn` method. This method accepts the following parameters:

| Parameter | Type | Description |
|----------|------|-------------|
Expand All @@ -110,11 +110,11 @@ You can add a column (or several columns) to the left or right of the column at

```typescript
//Insert a column to the right of the column at cursor position.
documentedior.editor.insertColumn();
documenteditor.editor.insertColumn();
//Insert a column to the left of the column at cursor position.
documentedior.editor.insertColumn(false);
documenteditor.editor.insertColumn(true);
//Insert two columns to the left of the column at cursor position.
documentedior.editor.insertColumn(false, 2);
documenteditor.editor.insertColumn(true, 2);
```

### Select an entire table
Expand All @@ -133,7 +133,7 @@ You can select the entire row at cursor position by using the following sample c
documenteditor.selection.selectRow();
```

If current selection spans across cells of different rows, all these rows will be selected.
If the current selection spans across cells of different rows, all these rows will be selected.

### Select column

Expand All @@ -143,7 +143,7 @@ You can select the entire column at cursor position by using the following sampl
documenteditor.selection.selectColumn();
```

If current selection spans across cells of different columns, all these columns will be selected.
If the current selection spans across cells of different columns, all these columns will be selected.

### Select cell

Expand All @@ -155,39 +155,39 @@ documenteditor.selection.selectCell();

## Delete table

Document editor allows to delete the entire table. You can use the `deleteTable()` method of editor instance, if selection is in table.
The Document Editor allows you to delete the entire table. You can use the `deleteTable()` method of the editor instance if the selection is in a table.

```typescript
documenteditor.editor.deleteTable();
```

## Delete row

Document editor allows to delete the selected number of rows. You can use the `deleteRow()` method of editor instance to delete the selected number of rows, if selection is in table.
The Document Editor allows you to delete the selected number of rows. You can use the `deleteRow()` method of the editor instance to delete the selected number of rows, if the selection is in a table.

```typescript
documenteditor.editor.deleteRow();
```

## Delete column

Document editor allows to delete the selected number of columns. You can use the `deleteColumn ()` method of editor instance to delete the selected number of columns, if selection is in table.
The Document Editor allows you to delete the selected number of columns. You can use the `deleteColumn()` method of the editor instance to delete the selected number of columns, if the selection is in a table.

```typescript
documenteditor.editor.deleteColumn();
```

## Merge cells

You can merge cells vertically, horizontally, or combination of both to a single cell. To vertically merge the cells, the columns within selection should be even in left and right directions. To horizontally merge the cells, the rows within selection should be even in top and bottom direction.
You can merge cells vertically, horizontally, or a combination of both to a single cell. To vertically merge the cells, the columns within the selection should be equal in the left and right directions. To horizontally merge the cells, the rows within the selection should be equal in the top and bottom directions.

```typescript
documenteditor.editor.mergeCells()
documenteditor.editor.mergeCells();
```

## Positioning the table

Document Editor preserves the position properties of the table and displays the table based on position properties. It does not support modifying the position properties. Whereas the table will be automatically moved along with text edited if it is positioned relative to the paragraph.
Document Editor preserves the position properties of the table and displays the table based on the position properties. It does not support modifying the position properties. The table will be automatically moved along with the text while editing if it is positioned relative to the paragraph.

## How to work with tables

Expand All @@ -205,7 +205,7 @@ The following sample demonstrates how to delete the table row or columns, merge



## See Also
## See also

* [Feature modules](./feature-module)
* [Insert table dialog](./dialog#table-dialog)
64 changes: 32 additions & 32 deletions Document-Processing/Word/Word-Processor/asp-net-mvc/text-format.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Text Format in ASP.NET MVC Document Editor Component | Syncfusion
title: Text Format in ASP.NET MVC DOCX Editor Component | Syncfusion
description: Learn here all about text format in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Text Format
documentation: ug
---


# Working with Text Formatting
# Text Formatting in ASP.NET MVC Document Editor

Document editor supports several formatting options for text like bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail.
Document Editor supports several formatting options for text like bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail.

## Bold

The bold formatting for selected text can be get or set by using the following sample code.
The bold formatting for selected text can be retrieved or set by using the following sample code.

```typescript
//Gets the value for bold formatting of selected text.
Expand All @@ -23,49 +23,49 @@ let bold : boolean = documenteditor.selection.characterFormat.bold;
documenteditor.selection.characterFormat.bold = true;
```

You can toggle the bold formatting based on existing value at selection.
You can toggle the bold formatting based on the existing value at the selection.

```typescript
documenteditor.editor.toggleBold();
```

## Italic

The Italic formatting for selected text can be get or set by using the following sample code.
The Italic formatting for selected text can be retrieved or set by using the following sample code.

```typescript
documenteditor.selection.characterFormat.italic= true|false;
documenteditor.selection.characterFormat.italic = true | false;
```

You can toggle the Italic formatting based on existing value at selection.
You can toggle the italic formatting based on the existing value at the selection.

```typescript
documenteditor.editor.toggleItalic();
```

## Underline property

The underline style for selected text can be get or set by using the following sample code.
The underline style for selected text can be retrieved or set by using the following sample code.

```typescript
documenteditor.selection.characterFormat.underline='Single' | 'None';
documenteditor.selection.characterFormat.underline = 'Single' | 'None';
```

You can toggle the underline style of selected text based on existing value at selection by specifying a value.
You can toggle the underline style of selected text based on the existing value at the selection by specifying a value.

```typescript
documenteditor.editor.toggleUnderline('Single');
```

## Strikethrough property

The strikethrough style for selected text can be get or set by using the following sample code.
The strikethrough style for selected text can be retrieved or set by using the following sample code.

```typescript
documenteditor.selection.characterFormat.strikethrough='Single' | 'Normal';
documenteditor.selection.characterFormat.strikethrough = 'Single' | 'Normal';
```

You can toggle the strikethrough style of selected text based on existing value at selection by specifying a value.
You can toggle the strikethrough style of selected text based on the existing value at the selection by specifying a value.

```typescript
documenteditor.editor.toggleStrikethrough();
Expand Down Expand Up @@ -115,48 +115,48 @@ documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleC

## Size

The size of selected text can be get or set using the following code.
The size of selected text can be retrieved or set using the following code.

```typescript
documenteditor.selection.characterFormat.fontSize= 32;
documenteditor.selection.characterFormat.fontSize = 32;
```

## Color

### Change Font Color by UI Option
### Change font color by UI option

In the Document Editor, the Text Properties pane features two icons for managing text color within the user interface (UI):
In the Document Editor, the Text Properties pane contains two icons for managing text color within the user interface (UI):

* **Colored Box:** This icon visually represents the **current color** applied to the selected text.
* **Text (A) Icon:** Clicking this icon allows users **to modify the color** of the selected text by choosing a new color from the available options.
* **Text (A) Icon:** Clicking this icon allows users to **change the** color of the selected text **using the color picker**.

This Font Color option appear as follows.
This Font Color option appears as follows.

![Font Color](images/fontColor.PNG)

### Change Font Color by Code
### Change font color by code

The color of selected text can be get or set using the following code.
The color of selected text can be retrieved or set using the following code.

```typescript
documenteditor.selection.characterFormat.fontColor= 'Pink';
documenteditor.selection.characterFormat.fontColor= '#FFC0CB';
documenteditor.selection.characterFormat.fontColor = 'Pink';
documenteditor.selection.characterFormat.fontColor = '#FFC0CB';
```

## Font

The font style of selected text can be get or set using the following sample code.
The font style of selected text can be retrieved or set using the following sample code.

```typescript
documenteditor.selection.characterFormat.fontFamily= 'Arial';
documenteditor.selection.characterFormat.fontFamily = 'Arial';
```

## Highlight color

The highlight color of the selected text can be get or set using the following sample code.
The highlight color of the selected text can be retrieved or set using the following sample code.

```typescript
documenteditor.selection.characterFormat.highlightColor= 'Pink';
documenteditor.selection.characterFormat.highlightColor = 'Pink';
```

## Bidirectional
Expand All @@ -168,7 +168,7 @@ The bidi property controls whether selected text is displayed as right-to-left (
var bidi = documenteditor.selection.characterFormat.bidi;

// Set Bidi for selected text
documenteditor.selection.characterFormat.bidi= true;
documenteditor.selection.characterFormat.bidi = true;
```

## Toolbar with options for text formatting
Expand All @@ -183,11 +183,11 @@ documenteditor.selection.characterFormat.bidi= true;
{% endhighlight %}
{% endtabs %}

## Online Demo
## Online demo

Explore how to apply text formatting in Word documents using the ASP.NET MVC Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/characterformatting#/tailwind3).
Explore how to apply text formatting in Word documents using the ASP.NET MVC Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/characterformatting#/tailwind3).

## See Also
## See also

* [Feature modules](./feature-module)
* [Font dialog](./dialog#font-dialog)
Expand Down
Loading