Unable to add table option to syncfusion richtexteditor - rich-text-editor

Question

I am using syncfusion ej2 richtexteditor component for asp.net mvc. All tools are working fine but when I add "table" option to the tools it gives error in the console and toolbar does not shows.
Following error appears on the console.
Uncaught TypeError: Cannot read property 'id' of undefined
at e.getObject (constants.js:78)
at e.getItems (constants.js:78)
at e.getToolbarOptions (constants.js:78)
at e.render (constants.js:78)
at e.renderToolbar (constants.js:78)
at e.notify (constants.js:78)
at t.notify (constants.js:78)
at t.render (constants.js:78)
at t.appendTo (constants.js:78)
at Contact:130
Here is my initialization code in the view:
#Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).ShowCharCount(true).MaxLength(2000).Render()
Controller code:
public ActionResult Contact()
{
ViewBag.tools = new[] {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image","table", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo"
};
ViewBag.table = new[] {
"Rows", "Columns", "tableCellVerticalAlign"
};
ViewBag.value = #"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides & lt; IFRAME & gt; and & lt; DIV & gt; modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>";
return View();
}
Can anyone please tell where I am missing the trick.

Answer 1

The support for tables in EJ2 Rich Text Editor control was provided from the version 16.3.21. Refer to the release notes for more information.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
#Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
public ActionResult Index()
{
ViewBag.value = #"<p>The rich text editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content</p>";
ViewBag.tools = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateTable", "CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
Make sure that you have included the dependent scripts and theme files in the _layout.cshtml page. For further information, refer to the Getting Started documentation
Sample

Answer 2

I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.