EasyUI Forum
May 14, 2021, 01:10:04 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Problem using a combobox on a menubutton.  (Read 4036 times)
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« on: August 14, 2014, 07:47:29 AM »

Hi JeasyUI Team,

I would like to use a combobox contained in an item of a menubutton, but the menubutton closes when the mouse enters on dropdown of the combobox. It is possible to fix this?

please see my attachment file, test.html.

Thanks in advance.
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #1 on: August 14, 2014, 08:11:54 AM »

Please try the updated example 'test.html'.
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #2 on: February 25, 2021, 12:35:58 AM »

Hi jarry,

what when i want to use the combobox in a nested menu?

Code:
    <div id='menu_options' class='easyui-menu'>
        <div>
            <span>priority2</span>
            <div class="menu-content" data-options="onShow: function(){alert('test')}">
                <input class="easyui-combobox" style="width: 100%;">
            </div>
        </div>
....
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #3 on: March 01, 2021, 02:34:11 AM »

anybody an idea?
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #4 on: March 01, 2021, 07:28:13 PM »

Please look at this code.
Code:
<div id="mm" class="easyui-menu menu-content" style="width:100px;height:200px;padding:0" data-options="
onShow:function(){
var m = $(this);
        $(this).find('.easyui-combobox').combobox('panel').off('.mm').on('mouseover.mm', function(e){
            m.triggerHandler('mouseenter');
        });
},
    onHide:function(){
        $(this).find('.easyui-combobox').combobox('hidePanel');
    }
">
<div style="padding:10px">
        <span>priority2</span>
        <div class="menu-content" data-options="onShow: function(){alert('test')}">
            <input class="easyui-combobox" style="width: 100%;" data-options="data:comboData,valueField:'id',textField:'text'">
        </div>
    </div>
</div>

To display the menu, you should call the 'show' method on some conditions.
Code:
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #5 on: March 04, 2021, 04:08:35 AM »

Hi jarry,

thank you for your reply.

I can't get this to work.

First i have a menu-button with a menu.
In this menu i want a sub menu which contains the combobox.

Please see added screenshot.
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #6 on: March 05, 2021, 12:10:01 AM »

Please refer to this example http://code.reloado.com/umujoc3/edit#preview
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #7 on: March 07, 2021, 04:57:29 AM »

Hi jarry,

first thank you for your help.

Your example works nearly perfect - but:
if you click in the combobox and move the mouse to another menu item the panel will shown on upper left corner.

You can see this issue in your example.

Is there a solution for that?
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #8 on: March 07, 2021, 07:18:27 PM »

Please look at this updated example again http://code.reloado.com/umujoc3/2/edit#preview
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!