EasyUI Forum

General Category => Bug Report => Topic started by: omhardb on July 25, 2014, 11:06:32 AM



Title: Error in menubutton when the menu is shared between two or more buttons
Post by: omhardb on July 25, 2014, 11:06:32 AM
I try to create a menubutton in a formatter of a datagrid. This menubutton must be shown different options available for each row. In order to do this, I create only one menu and for buttons in each row I refer them to this menu, like this:

Menu
Quote
<div id="mnuOpciones" data-options="onClick: onClickMnuOpciones">
  <div id="mnuOpcionPropiedades" data-options="iconCls:'icon-sbs-propiedades'">Propiedades</div>
  <div id="mnuOpcionObjetivo" data-options="iconCls:'icon-sbs-objetivo'">Objetivo</div>
  <div id="mnuOpcionMuestreo" data-options="iconCls:'icon-sbs-quimica'">Muestreo</div>
</div>

Menubutton in formatter
Quote
var btnId = btnOpcionesId + '_' + key;
var btn = '<a id="' + btnId + '" href="javascript:void(0)"></a>';
           
setTimeout(function(){
  $('#' + btnId).menubutton({
     iconCls: 'icon-sbs-engranaje',
     menu: '#'+ mnuOpciones,
     disabled: false,
     plain: true,
     onClick : function () {
         onClickBtnOpciones (key, row);
     }
  });
}, 0);
           
return btn;

However, when i click in a menubutton after that the menu was opened to another menubutton in a different row, the menu of the current row, close immediately. Maybe the reason for this is because the menu is shared between buttons. Could you please give me a solution to this don't happen?

PS: In my case, I change the delay time to close the menu to a higger value that you have, approximately 1000 miliseconds. Maybe this also is affecting.


Title: Re: Error in menubutton when the menu is shared between two or more buttons
Post by: stworthy on July 25, 2014, 07:10:19 PM
The 'setTimeout' is not a good way to create the menubutton. The better opportunity is to use the 'onLoadSuccess' event. Please try the code below.
Your 'formatter' function.
Code:
function formatMenu(value,row){
  ...
  var btn = '<a id="' + btnId + '" class="mb" href="javascript:void(0)"></a>';
  return btw;
}
Create menubutton after data is loaded successfully.
Code:
$('#dg').datagrid({
  onLoadSuccess:function(){
    $(this).datagrid('getPanel').find('a.mb').menubutton({
      text: 'mb',
      menu: '#mnuOpciones',
      onClick: function(){

      }
    })
  }
})


Title: Re: Error in menubutton when the menu is shared between two or more buttons
Post by: ryupanqui on July 28, 2014, 01:04:09 AM
stworthy, nice solution to load menubuttons on formatter.

however, I have a similar problem than omhardb. Please open my test.html file attached and click quickly in each menubutton and see than the menu is shown, hidden and shown again, but it seems that it works correctly only when the mouse passes over the buttons.

Thanks in advance


Title: Re: Error in menubutton when the menu is shared between two or more buttons
Post by: stworthy on July 28, 2014, 01:54:50 AM
The 'duration' property indicates the duration time in milliseconds to show menu when hovering the button. This property also indicates the duration time when hiding the menu(this property is available since version 1.4). You set a larger 'duration' value(1000), so hiding the menu will take a little time. In order to decrease the 'duration' time when hiding the menu, try the code below:
Code:
function onLoadSuccess(){
    $(this).datagrid('getPanel').find('a.mb').menubutton({
      text: 'menubutton',
      menu: '#mnuOpciones',
      duration: 1000,
      onClick: function(){

      }
    })
    $('#mnuOpciones').menu('options').duration = 0;
  }