How to give borders to table.

[Pavankumar]

Hi,

I am able to insert tables inside the Editor using the "Create table" button.

However, I am not able to format the table (like giving border to the table and setting width etc.)

Is there any solution to this problem.

Thanks,
Pavan

[Dimo]

Hello Pavan,

In case all tables that the user is adding, will have the same border and width styles, you can inject custom CSS styles inside the Editor iframe, as shown in this demo:

http://demos.telerik.com/kendo-ui/editor/styles

When using the inline Editor mode, there is no iframe, so you should insert the required table styles directly on the main web page.

If each table inside the Editor should have different border and width styles, then you will need a custom tool to insert tables.

http://demos.telerik.com/kendo-ui/editor/custom-tools

Another possible option is to intercept the table insertion and display an additional popup for the user to enter the desired table properties.

<textarea id="editor" rows="10" cols="30"></textarea>
<script>
    $(document).ready(function() {
        $("#editor").kendoEditor({
            resizable: true,
            execute: function (e) {
                if (e.name == "createtable") {
                    var win = $("<div id='editorTableWindow' style='display:none'>" +
                        "<label for='editorTableWidth'>Set table width</label> " +
                        "<input id='editorTableWidth' /> " +
                        "<button class='k-button' id='editorTableButton'>Apply</button> " +
                        "</div>'")
                        .appendTo(document.body)
                        .kendoWindow({
                            title: "Set table properties",
                            width: 600,
                            visible: false,
                            modal: true,
                            close: function (e) {
                                var tableWidth = $("#editorTableWidth").data("kendoNumericTextBox").value();
                                var table = $($("#editor").data("kendoEditor").body).find("table:not(.manipulated)");
                                table.width(tableWidth).addClass("manipulated");
                            },
                            deactivate: function (e) { e.sender.destroy(); }
                        }).data("kendoWindow");
                    $("#editorTableWidth").kendoNumericTextBox({ min: 1, decimals: 0 });
                    win.center().open();
                    $("#editorTableButton").click(function (e) {
                        win.close();
                    });
                }
            }
        });
    });
</script>

Regards,
Dimo
Telerik

[Pavankumar]

Hi,

 I guess in my scenario, intercepting the event is the only option. However, the event is getting called even before the table is inserted. I need to modify the table after it's creation. Also, I didn't understand what's the purpose of the ".manipulated" class. Is this a working code? 

Also, giving "border=1" to the table is not having any affect on the created table (I tried this by modifying the generated tags).

Also, if I choose to create a custom control, how to create the table creating grid animation? 

 Thanks,

Pavan

[Dimo]

Hello Pavan,

Yes, surely the provided code is working.

The "manipulated" CSS class helps you distinguish between tables, which have already been inserted on previous iterations, and the last one, which has just been inserted and the custom popup Window should customize. The fact that the execute event is fired before the table is actually inserted into the content area is a non-issue in the provided example. If you need to manipulate the table immediately in the event handler (e.g. without/before showing a Window), use setTimeout.

border="1" is an obsolete HTML attribute. Use border CSS styles instead.

I am afraid I cannot provide instructions or advice about the user interface implementation of custom Editor tools - this depends entirely on your preferences.

Regards,
Dimo
Telerik

[Pavankumar]

It worked like a charm, thanks Dimo :) !!