Blogs

In this post, we will load the jqxMenu widget from an Array. 1. Create an array. The displayed text in the menu item is specified by the ‘label’ member. To add sub items to a Menu Item, we need to define ‘items’ array.

var source = [
{ label: "Products", items: [
   { label: "Product A" },
   { label: "Product B" }
]
},
{ label: "Purchase" },
{ label: "Contact Us" },
{ label: "About Us"}];

2. To create the Menu, set the source property to point to the source object.

$("#jqxMenu").jqxMenu({ source: source, width: '400px', height: '30px' });

3. As we need to be able to handle mouse clicks, we bind to the jqxMenu’s ‘itemclick’ event. In the event event handler, we get the clicked object by using the event.args member.

$("#jqxMenu").bind('itemclick', function (event) {
  // get the clicked object.              
  var clickedObject = $(event.args);
});

Here’s the result: