How to create the menu items dynamically?

5 mins read

You can create the menu items dynamically by two ways.

Using public methods like insert, insertBefore and insertAfter.

Specifying the new data source to the menu.

By using public methods:

The public methods are applicable for all type of menus structure (“ul”, “JSON”, “template”).

The insert method:

The insert method is used to add the menu items as child to target nodes. This method contains two parameters. One is menu items collection (i.e., one or more menu items) that consists of collection of item to be added as child items for the target elements. Second one is target node collections that consists of collections of target element. It is not necessary to add the second parameter that is the target element. You can also specify the target for the new elements by using the parentId attribute.

Refer to the following code example that explains how to use insert method.

<!-- menu example-->
<ul id="menu">
<li id="Home"><a>Home</a></li>
<li>
<a>Search Jobs</a>
<ul>
<li><a>Advanced Search</a></li>
<li><a>Jobs by Company</a></li>
<li><a>Jobs by Category</a></li>
<li><a>Jobs by Location</a></li>
<li><a>Jobs by Skills</a></li>
<li><a>Jobs by Designation</a></li>
</ul>
</li>
<li id="PostResume"><a>Post Resume</a></li>
<li id="JobSeeker"><a>JobSeeker Login</a></li>
<li id="FastForward">
<a>Fast Forward</a>
<ul>
<li><a>Resume writing</a></li>
<li><a>Certification</a></li>
<li><a>Resume Spotlight</a></li>
<li><a>Jobs4u</a></li>
</ul>
</li>
</ul>
<script>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item("More1") as child of target node("Home")
menuObj.insert([{ id: 1, text: "More1" }], "#Home");
//To insert menu item("More2") as child of target node("Home") with parentId
menuObj.insert([{ id: 2, text: "More2", parentId: "Home" }]);
//To insert menu items("More3,More4") as child of target node("Home")
menuObj.insert([{ id: 3, text: "More3" }, { id: 4, text: "More4" }], "#Home");
//To insert menu items("More5,More6") as child of target node("Home,PostResume")
menuObj.insert([{ text: "More5" }, { text: "More6" }], ["#Home","#PostResume"]);
//To insert menu item("More7") as child of target node("Home") and menu item("More8") as child of target node("PostResume")
menuObj.insert([{ id: 5, text: "More7", parentId: "Home" }, { id: 6, text: "More8", parentId: "PostResume" }]);
</script>

The insertBefore method:

The insertBefore method adds the new/dynamically specified menu items before the specified target element. It requires two parameters. The parameter that you need to specify for this method, is same as the one that you specify for insert method.

Refer to the following code example for how to use inserBefore method.

<script>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item("More1") before to the target node("Home")
menuObj.insertBefore([{ id: 1, text: "More1" }], "#Home");
//To insert menu item("More2") before to the target node("Home") with parentId
menuObj.insertBefore([{ id: 2, text: "More2", parentId: "Home" }]);
//To insert menu items("More3,More4") before to the target node("Home")
menuObj.insertBefore([{ id: 3, text: "More3" }, { id: 4, text: "More4" }], "#Home");
//To insert menu items("More5,More6") before to the target node("Home,PostResume")
menuObj.insertBefore([{ text: "More5" }, { text: "More6" }], ["#Home", "#PostResume"]);
//To insert menu item("More7") before to the target node("Home") and menu item("More8") before to the target node("PostResume")
menuObj.insertBefore([{ id: 5, text: "More7", parentId: "Home" }, { id: 6, text: "More8", parentId: "PostResume" }]);
</script>

The insertAfter method:

The insertAfter method adds the new/dynamically specified menu items after the specified target element. It requires two parameters. The parameter that you need to specify for this method, is also same as the one that you specify for insert/insertbefore method.

Refer to the following code example for how to use insertAfter method.

<script>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item("More1") before to the target node("Home")
menuObj.insertAfter([{ id: 1, text: "More1" }], "#Home");
//To insert menu item("More2") before to the target node("Home") with parentId
menuObj.insertAfter([{ id: 2, text: "More2", parentId: "Home" }]);
//To insert menu items("More3,More4") before to the target node("Home")
menuObj.insertAfter([{ id: 3, text: "More3" }, { id: 4, text: "More4" }], "#Home");
//To insert menu items("More5,More6") before to the target node("Home,PostResume")
menuObj.insertAfter([{ text: "More5" }, { text: "More6" }], ["#Home", "#PostResume"]);
//To insert menu item("More7") before to the target node("Home") and menu item("More8") before to the target node("PostResume")
menuObj.insertAfter([{ id: 5, text: "More7", parentId: "Home" }, { id: 6, text: "More8", parentId: "PostResume" }]);
</script>

Specify the new data source:

You can create the menu items dynamically by specifying the data source at the runtime by using set model options. Refer to the following code example to specify it.

<ul id="menujson"></ul>
<script type="text/javascript">
var data = [
{ id: 1, text: "Group A", parentId: null },
{ id: 2, text: "Group B", parentId: null },
{ id: 3, text: "Group C", parentId: null },
//first level child
{ id: 11, parentId: 1, text: "Algeria" },
{ id: 12, parentId: 1, text: "Armenia" },
{ id: 13, parentId: 1, text: "Bangladesh" },
{ id: 14, parentId: 1, text: "Cuba" },
{ id: 15, parentId: 2, text: "Denmark" },
{ id: 16, parentId: 2, text: "Egypt" },
{ id: 17, parentId: 3, text: "Finland" },
{ id: 18, parentId: 3, text: "India" },
{ id: 19, parentId: 3, text: "Malaysia" },
];
jQuery(function ($) {
$("#menujson").ejMenu({ width: "300px" });
//create the object for menu
var menuobj = $("#menujson").data("ejMenu");
//dynamically specify the new data source to menu
menuobj.option("fields", { dataSource: data, id: "id", parentId: "parentId", text: "text", url: "url" });
});
</script>

Print menu items from database in sequelize nodejs

Create a MySQL Table with required set of data.
Sequelize is a promise- based ORM(Object-Relational Mapping) for node.js which supports the dialects PostgreSQL, MySQL, SQLite , MSSQL and more. ORM lets you to manipulate data from DataBase.

Please add the following code in index.js file of your project

/*jshint esversion: 8 */
var express = require('express');
 
var app = express();
var Sequelize = require("sequelize");
 
const bodyParser = require("body-parser");
 
var cors = require('cors')
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(cors());
 
//Setting up the config
var sequelize = new Sequelize('menusql', 'root', '', {  //menusql is DB name and root is username of MySQL login 
host: "localhost",
dialect: 'mysql' //type
});
//Authenticate the connection 
sequelize
.authenticate()
.then(() => {
console.log('Connection has been established successfully.');
})
.catch(err => {
console.error('Unable to connect to the database:', err);
});
//Gets the  database data as JSON in client side 
app.get('/getMenuItems', function (req, res) {   //get the data by specifying this name after the localhost path. 
//query from the corresponding table .
sequelize.query("SELECT * FROM `menuitems`", { type: sequelize.QueryTypes.SELECT }) 
.then(function (data) {
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(data));
})
 
 
});
 
 
/**
Server serving port
*/
var runPort = process.env.PORT || 8090; //listening port. 
var server = app.listen(runPort, function () {
server.setTimeout(10 * 60 * 1000);
var host = server.address().address;
var port = server.address().port;
console.log("Example app listening at http://%s:%s", host, port);
});

Sample index.js and package.json files are attached in the below link

https://www.syncfusion.com/downloads/support/directtrac/general/ze/file-623356845

Refer the required CSS and scripts for rendering menu control in the project.

Now the Menu can be bound with this dataSource through dataManager. Refer to the following code.

         <ul id="menujson">
         </ul>           
    <script type="text/javascript">
         var dataManager = ej.DataManager({
                url: "http://localhost:8090/getMenuItems", crossDomain: true  //Url based on index.js
            });  
        jQuery(function ($) {
            $("#menujson").ejMenu({
                fields: {
                    dataSource: dataManager, id: "id", text: "text"
                }
            });
        });
    </script>

Did you find this information helpful?

Yes

Comments (0)