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

4 posts, 0 answers
  1. Romik
    Romik avatar
    4 posts
    Member since:
    Feb 2016

    Posted 17 Jul 2017 Link to this post

    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!

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    646 posts

    Posted 19 Jul 2017 Link to this post

    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.
  3. Romik
    Romik avatar
    4 posts
    Member since:
    Feb 2016

    Posted 19 Jul 2017 in reply to Veselin Tsvetanov Link to this post

    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.

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    646 posts

    Posted 21 Jul 2017 Link to this post

    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.
Back to Top