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
    Dimo avatar
    8318 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


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




    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) {
            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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top