)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to create the menu items dynamically?

Platform: jQuery |
Control: ejMenu |
Published Date: February 18, 2015 |
Last Revised Date: September 6, 2019

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.

JS

<!-- 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.

JS

<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.

JS

<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.

JS

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

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon