Skip to content

378279: Added topic about how to set maximum rows, columns in Core and MVC #3759

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.

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
merged 7 commits into from
May 2, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 111 additions & 5 deletions ej2-asp-core-mvc/document-editor/table.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Table in ##Platform_Name## Document Editor Component
title: Table in ##Platform_Name## Document Editor Component | Syncfusion
description: Learn here all about table in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Table
Expand All @@ -21,7 +21,109 @@ You can create and insert a table at cursor position by specifying the required
documenteditor.editor.insertTable(3,3);
```

The maximum size of row and column is limited to 32767 and 63 respectively.
## Set the maximum number of Rows when inserting a table

{% if page.publishingplatform == "aspnet-core" %}

You can use the `maximumRows` property to set the maximum number of rows allowed while inserting a table in the Document Editor component.

Refer to the following sample code.

```ts
<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>

<script>
var container;
function onCreated() {
var documenteditorElement = document.getElementById("container");
container = documenteditorElement.ej2_instances[0];
container.documentEditorSetting = {
maximumRows: 4
};
}
</script>
```

{% elsif page.publishingplatform == "aspnet-mvc" %}

You can use the `maximumRows` property to set the maximum number of rows allowed while inserting a table in the Document Editor component.

```ts
<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
var container;
function onCreated() {
var documenteditorElement = document.getElementById("container");
container = documenteditorElement.ej2_instances[0];
container.documentEditorSetting = {
maximumRows: 4
};
}
</script>
```

{% endif %}

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

![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.

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

{% if page.publishingplatform == "aspnet-core" %}

You can use the `maximumColumns` property to set the maximum number of columns allowed while inserting a table in the Document Editor component.

Refer to the following sample code.

```ts
<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>

<script>
var container;
function onCreated() {
var documenteditorElement = document.getElementById("container");
container = documenteditorElement.ej2_instances[0];
container.documentEditorSetting = {
maximumColumns: 4
};
}
</script>
```

{% elsif page.publishingplatform == "aspnet-mvc" %}

You can use the `maximumColumns` property to set the maximum number of columns allowed while inserting a table in the Document Editor component.

Refer to the following sample code.

```ts
<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
var container;
function onCreated() {
var documenteditorElement = document.getElementById("container");
container = documenteditorElement.ej2_instances[0];
container.documentEditorSetting = {
maximumColumns: 4
};
}
</script>
```

{% endif %}

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

![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.

## Insert rows

Expand Down Expand Up @@ -145,7 +247,9 @@ The following sample demonstrates how to delete the table row or columns, merge
{% include code-snippet/document-editor/table/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Table.cs" %}
{% endhighlight %}{% endtabs %}
{% include code-snippet/document-editor/table/document-editor.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

Expand All @@ -154,12 +258,14 @@ The following sample demonstrates how to delete the table row or columns, merge
{% include code-snippet/document-editor/table/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Table.cs" %}
{% endhighlight %}{% endtabs %}
{% include code-snippet/document-editor/table/document-editor.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



## See Also

* [Feature modules](../document-editor/feature-module/)
* [Insert table dialog](../document-editor/dialog/#table-dialog)
* [Insert table dialog](../document-editor/dialog/#table-dialog)