Parent loses focus on Kendo UI Context Menu

Question

I have hovered sidebar on my page which have links for using search filters. Each link have click listener which opens Kendo UI context menu for some actions for current link. When I open Kendo Context Menu, sidebar hover is lost. How can I keep sidebar focus when user mouseenter context menu?

JS Fiddle is here

JavaScript

$(document).ready(function() {
    $('#nav').hover(function(){
        $(this).animate({width:'200px'},150);
    },function(){
        $(this).animate({width:'35px'},150);
    });

    $("#menu").click(function(e) {
        var menuHtml = $("#menu-template").html();

        $(menuHtml).kendoContextMenu({
            target: $(e.currentTarget),
            close: function() {
                this.destroy();
            },
            select: function(e) {
                var sel = $(e.item).attr('id');
            }
        }).data("kendoContextMenu").open();
    });
});

HTML

<div id="nav">
    <ul>
        <li><a id="menu">Click here</a></li>
    </ul>
</div>

<script id="menu-template" type="text/x-kendo-template">
    <ul>
        <li id='rename'>Rename</li>
        <li id='delete'>Delete</li>
    </ul>
</script>

CSS

#nav { 
    width:200px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background:#666;
    color:#fff;
    overflow:hidden;
}

#nav ul {
    margin:0;
    padding:0;
    width:200px;
    margin:40px;
    list-style:none;
}

#nav a span {
    margin:0 10px 0 0;
}

#nav a {
    color:#fff;
    font-size:14px;
}

Jarosław Kończak Jarosław Kończak · Accepted Answer · 2015-01-24T20:37:21

I had similar problem and i solve it in that ugly but working way:

$(menuHtml).kendoContextMenu({
    ...
    activate: function(e) {
        $('#nav').prepend($(e.item).parent());
    }
});

Updated JSFiddle: http://jsfiddle.net/oqa4aa9m/22/

Parent loses focus on Kendo UI Context Menu

1 Answers