Input box inside menu that doesn't close on click

[Gustavo]

Hi, I'm trying to have a menu option be an Inputbox, but it automatically closes when the user clicks on it to start typing.
The code I'm using is:
$("#menulogin").kendoMenu({
                    dataSource: [
                        {
text: "Login", imageUrl: "",
                            items: [
                                { text: "1", imageUrl: "images/icons/house.png" },
{ text: "2", imageUrl: "" },
                                { text: "3", imageUrl: "" },
{ text: "<div style='width:200px;position:relative;'><input id='subsearch' type='text' name='textfield' id='textfield' style='width:100%;' /><img src='images/icons/search_icons/normal/search_icon.png' width='26' height='20' style='position:absolute; right:0px;top:1px'  /></div>", encoded: false, closeOnClick: false, imageUrl: "" },
{ text: "<i>option 1</i>", encoded: false,imageUrl: "" },
{ text: "<i>option 2</i>", encoded: false,imageUrl: "" }
                            ] } ] });

What I want is to have the menu act normally when clicked at any option except the one with the DIV and INPUT tags. 
Not sure if it's with the closeOnClick option, but haven't been able to make it work.
Please help.

[Kamen Bundev]

Hello Gustavo,

You need to stop the event propagation on click in order to stop the menu from capturing the event and closing. Something like this:


Regards,
Kamen Bundev
the Telerik team

[Brad]

I had this challenge, except that I am loading menus via AJAX request due to access control restrictions. So I had to attach the click event listener to the input box once the menu items were appended. We're also wrapping Kendo UI controls in our own directives in so we can fancy them up a bit more. So my code ended up something like this (HTH) 

 

function MenuCtrl($scope, $attrs, $http) {

       if (!angular.isEmpty($attrs.menuSource)) {
           this.menuSource = $attrs.menuSource;
       } else {
           this.menuSource = false;
       }

       this.uiOptions = {
           openOnClick: true,
           data: {}
       };

       $http.get("http://myserver.com/data/" + this.menuSource + ".json").
           success(function (data) {
               $scope.controller.menuWidget.append(data);

               $('.k-link :input', $scope.controller.menuWidget.element.context).on('click',
                   function (event) {
                       event.stopPropagation();
                   });
           });

       $scope.controller = this;
   }