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

Position of Toolbar for editor

2 Answers 697 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.

2 Answers, 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!
 
Subramanian
Top achievements
Rank 1
Iron
commented on 25 Oct 2023, 02:11 PM

What about in the latest version 13.5.0
0
Subramanian
Top achievements
Rank 1
Iron
answered on 25 Oct 2023, 02:13 PM
But in latest version .window not accessible in toolbar
Martin
Telerik team
commented on 27 Oct 2023, 11:27 AM

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.

Tags
Editor
Asked by
John
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Subramanian
Top achievements
Rank 1
Iron
Share this question
or