Position of Toolbar for editor

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Apr 2014

    Posted 25 Apr 2014 Link to this post

    Is there any way to position the inline editor toolbar , say to the right of the editor div, rather than at the top. During my tests if I use an iPad then the toolbar disappears above the fold, when focus is on the editor, as the iPad keyboard appears, of course when I lose focus, on the editor again, the toolbar hides too, so I can't format the text. If I could position the toolbar to the left or the right, that would help.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Apr 2014 Link to this post

    Hi John,

    The inline Editor's toolbar is placed in a Kendo UI Window widget, which is accessible after Editor initialization via

    $("#EditorID").data("kendoEditor").toolbar.window

    At this point you can use the Window's API to tweak its initial settings, bind events, etc.

    http://docs.telerik.com/kendo-ui/api/web/window#methods-setOptions

    http://docs.telerik.com/kendo-ui/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method

    http://docs.telerik.com/kendo-ui/getting-started/widgets#accessing-kendo-ui-widget-elements

    For example:

    1. Go to http://demos.telerik.com/kendo-ui/web/editor/inline-editing.html

    2. Execute the following in the browser's JS console:

    var editorElement = $("#topEditor");
    var editorOffset = editorElement.offset();
     
    editorElement.data("kendoEditor").toolbar.window.bind("open", function (e) {
        e.sender.setOptions({
            position: {
                top: editorOffset.top,
                left: editorOffset.left + editorElement.outerWidth() + 5
            },
            width: 140
        });
    });


    3. Focus the top editor ("Comprehensive HTML5/JavaScript framework...")

    The editor element's offset and width can be cached in reusable variables to improve performance.

    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
Back to Top