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

Kendo editor toolbar disappears after mouse down 2nd time in editor.

3 Answers 214 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Romik
Top achievements
Rank 1
Romik asked on 17 Jul 2017, 08:34 PM

I have kendo editor inside of modal in a tabstrip window.

My Kendo editor is defined as below - 

            @(Html.Kendo().Editor()
                    .Name("instEditor")
                    .Tag("div")
                    .Encode(false)
                    .Tools(tools => tools
                            .Clear()
                            .Bold()
                            .Italic()
                            .Underline()
                            .Strikethrough()
                            .JustifyCenter().JustifyFull().JustifyLeft().JustifyRight()
                            .CreateLink().Unlink().TableEditing().FontColor().BackColor())
                            .Value(Model.IContent)                           
            )

 

I am getting the text in Kendo editor form database.

Whenever I run the application and Kendo editor renders, editor is loaded properly. When I click inside the editor, the toolbar pops up as expected. 

But as soon as I select a text in the editor or basically whenever I mousedown in the editor second time after initially entering into the editor, the toolbar disappears. And it does not appear back until I click outside of the editor and then click back inside the editor. 

How can I solve this issue?

 

Thanks!

 

 

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 19 Jul 2017, 10:29 AM
Hello Romica,

As far as I can understand, you have an inline Editor, which is placed within a modal Window widget. What I was able to observe in this scenario, is that after the second click in the Editor, its toolbar gets hidden behind the Window titlebar. Here you could find a Dojo sample that demonstrates this issue.

The observed should be considered a bug in the Editor / Window integration. Therefore, we have included that one in our backlog. Here you could find the GitHub item, where to track the bug fix status.

As a small token of gratitude for reporting to us this bug, I have updated your Telerik points.

As a temporary workaround for this problem, I could suggest you to handle the select event of the Editor, so it overrides the z-index of the Editor window, according to the z-index of the container Window:
select: function(e) {
  var windowZindex = Number($('#window').closest('.k-window').css('z-index'));
  $('.k-editor-widget').css('z-index', windowZindex + 1);
}

Here you could find a simple Dojo, implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Romik
Top achievements
Rank 1
answered on 19 Jul 2017, 02:41 PM

Hello Veselin,

The workaround worked for me well. But can you please explain the below code - 

var windowZindex = Number($('#window').closest('.k-window').css('z-index'));
  $('.k-editor-widget').css('z-index', windowZindex + 1);

What is this code doing?

Also, your workaround solves the initial issue but arises a new issue as well.

When we close the window, the form behind the window i.e. the initial form from where the window is triggered gets blocked and we cannot work on the initial form. Until and unless we refresh the page. The initial form is dimmed (grayed) and behaves like as if window is still open.

 

0
Veselin Tsvetanov
Telerik team
answered on 21 Jul 2017, 09:19 AM
Hi Romica,

The suggested workaround basically gets the z-index of the Window widget and assigns greater value for the same CSS property to the Editor widget. This way, the toolbar of the Editor will always remain on top of the Window titlebar.

Concerning the newly observed issue, attached you will find a simple MVC application, based on the snippets from your previous post. As I was not able to reproduce the issue in this case, I would like to ask you to modify the above, so it replicates the problem and send it back to us. This way we will be able to troubleshoot the issue locally and to provide you with the most appropriate assistance for this case.

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Romik
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Romik
Top achievements
Rank 1
Share this question
or