New to Kendo UI for jQuery? Download free 30-day trial

Merge Table Cells in the Editor

Environment

Product Progress® Kendo UI® Editor for jQuery
Product Version 2023.1.315

Description

How can I make merge table cells with the Kendo UI Editor?

Solution

Register two new custom tools that merge cells horizontally and vertically.

    <div id="example">
        <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>

        <script>
            var MergeColumnCellsCommand =  kendo.ui.editor.Command.extend({
                exec: function () {
                    var range = this.lockRange(true),
                        currentTd = kendo.ui.editor.Dom.closest(range.endContainer, "td"),
                        columnIndex = kendo.ui.editor.Dom.findNodeIndex(currentTd),
                        nextTd = $(currentTd).parent().next().children()[columnIndex];

                    if(currentTd && nextTd) {
                        nextTd.remove();
                        $(currentTd).prop("rowspan", 2);
                    }

                    this.releaseRange(range);
                }
            });

            var MergeRowCellsCommand =  kendo.ui.editor.Command.extend({
                exec: function () {
                    var range = this.lockRange(true),
                        currentTd = $(kendo.ui.editor.Dom.closest(range.endContainer, "td")),
                        nextTd = currentTd.next();

                    if(currentTd && nextTd) {
                        nextTd.remove();
                        currentTd.prop("colspan", 2);
                    }

                    this.releaseRange(range);
                }
            });

            $.extend(kendo.ui.editor, {
                MergeColumnCellsCommand: MergeColumnCellsCommand,
                MergeRowCellsCommand: MergeRowCellsCommand
            });

            var mergeTool =  kendo.ui.editor.TableModificationTool.extend({
                command: function (commandArguments) {
                    var options = $.extend(commandArguments, this.options);

                    if(options.type == "column") {
                        return new MergeColumnCellsCommand($.extend(commandArguments, { }));
                    } else {
                        return new MergeRowCellsCommand($.extend(commandArguments, { }));
                    }
                },
                update: $.noop
            });

            kendo.ui.editor.EditorUtils.registerTool(
                "cellsMergeVertically",
                new mergeTool({
                    type: "column",
                    action: "merge",
                    ui: {
                        attributes: {
                            title: "Merge Next Column"
                        }
                    }
                })
            );

            kendo.ui.editor.EditorUtils.registerTool(
                "cellsMergeHorizontally",
                new mergeTool({
                    type: "row",
                    action: "merge",
                    ui: {
                        attributes: {
                            title: "Merge Next Row"
                        }
                    }
                })
            );
            $("#editor").kendoEditor({
                tools: [
                    "tableWizard",
                    "createTable",
                    "addRowAbove",
                    "addRowBelow",
                    "addColumnLeft",
                    "addColumnRight",
                    "deleteRow",
                    "deleteColumn",
                    "cellsMergeVertically",
                    "cellsMergeHorizontally"
                ]
            });
        </script>
    </div>

See Also

In this article