Error in menubutton when the menu is shared between two or more buttons

[omhardb]

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

<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

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.

[stworthy]

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(){

      }
    })
  }
})

[ryupanqui]

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

[stworthy]

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;
  }