Align submenus (loaded with dataAdapter) on the left side of the top-level items

[ben.macphersonParticipant]

Hi,

I use the jqxMenu to display vertical menu on right side of the viewport, therefore, i need all the submenus to be opened on the left side of the top-level items. The issue is that i am using a dataAdapter component and a source property to populate the jqxMenu. I have tried to achieve this behaviour using setItemOpenDirection method but i have got a “Invalid Selector!” exception, because i guess the menu items are not been loaded in the DOM when the setItemOpenDirection is defined.

My code example looks like this:

$(document).ready(function () {

var data = [{
“text”: “Menu1”,
“id”: “1”,
“parentid”: “-1”
},

{
“text”: “Menu2”,
“id”: “2”,
“parentid”: “1”,
},

{
“text”: “Menu3”,
“id”: “3”,
“parentid”: “-1”
}
]

var sourceleftmenu =
{
datatype: “json”,
async: false,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
localdata: data
};

var dataAdapter1 = new $.jqx.dataAdapter(sourceleftmenu, {
loadComplete: function() {

}});

dataAdapter1.dataBind();

var records = dataAdapter1.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]);

$(‘#jqxmenu’).jqxMenu({ source: records, height: 400, width: ‘400px’, mode:’vertical’ });

$(“#jqxMenu”).jqxMenu(‘setItemOpenDirection’, ‘1’, ‘left’, ‘down’);

});

Error is: jquery-3.1.1.min.js:2 Uncaught Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.

Any suggestions how can I achieve my purpose? Thanks.

[MartinParticipant]

Hello ben.macpherson,

From what I use in your code, when you are setting the open direction you are using #jqxMenu selector, instead of #jqxmenu.
I think this is the actual issue. Here is a working Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ben.macphersonParticipant]

Thanks Martin,

You are right, thanks. One last question, Is it possible to set the open direction for all the submenus of the same menu and not per top-level item id. ?

[MartinParticipant]

Hello ben.macpherson,

No, there is not such functionality implemented.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ben.macphersonParticipant]

Thanks so much for your support.

[Author]

Posts