Position of Toolbar for editor

[John]

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.

[Dimo]

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

 

 

[Subramanian]

What about in the latest version 13.5.0

[Subramanian]

But in latest version .window not accessible in toolbar

[Martin]

Hello, Subramanian,

In the recent versions the toolbar no longer contains an instance of the Window. Here you will find the correct approach to reference the Window and change its position. Please note that the Dojo works with 2023.2.829 and not with the latest 2023.3.1010 due to a bug that is currently being handled. Let me know if you have any questions.