Input box inside menu that doesn't close on click

3 posts, 0 answers
  1. Gustavo
    Gustavo avatar
    1 posts
    Member since:
    Aug 2012

    Posted 03 Sep 2012 Link to this post

    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:
                        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. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 06 Sep 2012 Link to this post

    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:

    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!
  3. Brad
    Brad avatar
    1 posts
    Member since:
    May 2015

    Posted 26 May 2015 Link to this post

    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("" + this.menuSource + ".json").
               success(function (data) {
                   $('.k-link :input', $scope.controller.menuWidget.element.context).on('click',
                       function (event) {
           $scope.controller = this;
Back to Top