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

Input box inside menu that doesn't close on click

2 Answers 52 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Gustavo
Top achievements
Rank 1
Gustavo asked on 03 Sep 2012, 04:35 PM
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.

2 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 06 Sep 2012, 06:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brad
Top achievements
Rank 1
answered on 26 May 2015, 02:02 PM

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;
   }
Tags
Menu
Asked by
Gustavo
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Brad
Top achievements
Rank 1
Share this question
or