2

I'm working on porting a WinForm app to the browser and would like to retain the ability to have a set of drop down menus along the top (within the Toolbar) of jqGrid.

I'm able to create a custom toolbar for the top of the grid w/o cloning the bottom and thus have action buttons. I'm also able to clone the existing navigator.

What I'm missing is how to have either of these two options incorporate a menu system such as jQuery UI Menu. The below code will add the menu to the toolbar but the menu then becomes hidden behind the grid. I've tried adjusting the z-index and position but neither appeared to resolve it.

toolbar: [true,'top'];
...
$("#toolbarId").append('<ul id="myMenu"><li><a href="#">File</a><ul><li>'+
'<a href="#">New</a></li><li><a href="#">Delete</a></li></ul></li></ul>');
$("#myMenu").menu();

Any help is appreciated. Thx.

Community
  • 1
  • 1
Randy
  • 1,955
  • 2
  • 15
  • 24

1 Answers1

1

I suggest that you use position option of jQuery UI Menu Widget. You can use using callback (see documentation of jQuery UI Position) to change properties of submenu.

Just try for example

$("#myMenu").menu({position: {
    of: "#gview_" + $grid[0].id,
    my: "left top",
    at: "left top",
    using: function (props, feedback) {
        $(this).css({top: (props.top + 25), left: (props.left + 50), zIndex: 1005});
    }
}}).css("width", "50px");

where var $grid = $("#grid"); - your grid. You will see the possibilities which you have.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks Oleg. Worked perfectly. I also found that it helps to have my jquery-ui.css at the same version of my jquery-ui.js. :$ – Randy Apr 09 '13 at 13:20