New to Kendo UI for jQuery? Start a free 30-day trial

Deactivate

events

Fires when a sub menu or the ContextMenu gets closed and its animation finished.

deactivate

Event Data

e.item `Element`

The deactivated item

e.type `String`

The event type as a string - "deactivate".

e.target `Element`

The current target of the ContextMenu - either the init target or the current element chosen through filter, if specified.

To set after initialization

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    // initialize the ContextMenu
    $("#context-menu").kendoContextMenu({
        target: "#target"
    });
     // get a reference to the ContextMenu widget
     var contextMenu = $("#context-menu").data("kendoContextMenu");
     // bind to the deactivate event
     contextMenu.bind("deactivate", function(e) {
         // handle event
     });
</script>

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#context-menu").kendoContextMenu({
        target: "#target",
        activate: function(e){
            $('li.k-item.k-hover').css('font-weight','bold');
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(e.item);
        },
        deactivate: function(e) {
            $('li.k-item').css('font-weight','');
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log(e.item);
        }
    });
</script>