Create a Table with Borders in the Editor

Environment

Product Kendo UI Editor
Kendo UI version Created with the 2019.1.220 version

Description

How to create a table with borders in the Editor?

Solution

The Table Wizard allows you to set table border size, color and style. To apply borders to the table created with the Create a table tool, handle the execute event and add the styles to the respective elements:

    <div id="example">
        <textarea id="editor">
        </textarea>
        <script>
            $(document).ready(function() {
                $("#editor").kendoEditor({ 
                    execute: function(e) {
                        var editor = this;
                        if (e.name == "createtable") {
                            setTimeout(function() {
                                var table = $(editor.body).find("table:not(.custom-table)");
                                table.addClass("custom-table");
                                table.attr("style", "border: 1px solid black;");
                                table.find("tr td")
                                    .each(function () {
                                    var currentStyle = $(this).attr("style");
                                    $(this).attr("style", currentStyle + " border: 1px solid black;");
                                });
                            }, 0);   
                        }
                    }
                });
            });
        </script>
    </div>

See Also

In this article
Not finding the help you need? Improve this article