How to give borders to table.

5 posts, 0 answers
  1. Pavankumar
    Pavankumar avatar
    9 posts
    Member since:
    Aug 2014

    Posted 26 Mar 2015 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 30 Mar 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Pavankumar
    Pavankumar avatar
    9 posts
    Member since:
    Aug 2014

    Posted 08 Apr 2015 in reply to Dimo Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 09 Apr 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Pavankumar
    Pavankumar avatar
    9 posts
    Member since:
    Aug 2014

    Posted 10 Apr 2015 in reply to Dimo Link to this post

    It worked like a charm, thanks Dimo :) !!
Back to Top
Kendo UI is VS 2017 Ready