Print Page - Problem using a combobox on a menubutton.

Title: Problem using a combobox on a menubutton.
Post by: ryupanqui 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.

Title: Re: Problem using a combobox on a menubutton.
Post by: jarry on August 14, 2014, 08:11:54 AM

Please try the updated example 'test.html'.

Title: Re: Problem using a combobox on a menubutton.
Post by: sky-t 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>
....

Title: Re: Problem using a combobox on a menubutton.
Post by: sky-t on March 01, 2021, 02:34:11 AM

anybody an idea?

Title: Re: Problem using a combobox on a menubutton.
Post by: jarry 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
});

Title: Re: Problem using a combobox on a menubutton.
Post by: sky-t 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.

Title: Re: Problem using a combobox on a menubutton.
Post by: jarry on March 05, 2021, 12:10:01 AM

Please refer to this example http://code.reloado.com/umujoc3/edit#preview

Title: Re: Problem using a combobox on a menubutton.
Post by: sky-t 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?

Title: Re: Problem using a combobox on a menubutton.
Post by: jarry on March 07, 2021, 07:18:27 PM

Please look at this updated example again http://code.reloado.com/umujoc3/2/edit#preview

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: ryupanqui on August 14, 2014, 07:47:29 AM