This is a migrated thread and some comments may be shown as answers.

Position of Toolbar for editor

1 Answer 223 Views
Editor
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 25 Apr 2014, 09:16 AM
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.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Apr 2014, 03:10 PM
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!
 
Tags
Editor
Asked by
John
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or