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. Image for the cookie policy date
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 show menu control in Grid Toolbar?

Platform: jQuery |
Control: ejGrid
Tags: menu, toolbar

The ejMenu control popup will be set to hidden inside the toolbar control. To overcome this problem, two different unordered lists in a hierarchical manner will be placed using the templateID property of the Grid customToolbarItems. Later, in the dataBound event of the Grid, ejMenu control will be rendered.



Render the Grid with the customToolbarItems and dataBound event.




    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {


                dataSource: window.gridData,

                allowPaging: true,

                dataBound: "dataBound",

                toolbarSettings: { showToolbar: true, customToolbarItems: [{ templateID: "#Refresh" }] },

                columns: [

                        { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right },

                        { field: "CustomerID", headerText: "Customer ID" },

                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },

                        { field: "Freight", format: "{0:C}", textAlign: ej.TextAlign.Right },

                        { field: "OrderDate", headerText: "Order Date", format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },

                        { field: "ShipCity", headerText: "Ship City" }










        .ToolbarSettings(tools => {


            tools.CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Refresh" } });


    .Columns(col =>


        col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add();

        col.Field("CustomerID").HeaderText("Customer ID").Add();

        col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Add();


        col.Field("OrderDate").HeaderText("Order Date").Format("{0:MM/dd/yyyy}").TextAlign(TextAlign.Right).Add();

        col.Field("ShipCity").HeaderText("Ship City").Add();


    .ClientSideEvents(events => events.DataBound("dataBound"))



    public class HomeController : Controller


        public ActionResult Index(){

            ViewBag.datasource = OrderRepository.GetAllRecords();

            return View();




Asp.Net Core


    <ej-grid id="Grid" datasource="ViewBag.datasource" data-bound="dataBound" allow-paging="true" >

        <e-toolbar-settings show-toolbar="true">


                <e-custom-toolbar-item template-id="#Refresh"></e-custom-toolbar-item>




            <e-column field="OrderID" header-text="Order ID" text-align="Right"></e-column>

            <e-column field="CustomerID" header-text="CustomerID" ></e-column>

            <e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column>

            <e-column field="Freight" format="{0:C}" header-text="Freight" text-align="Right"></e-column>

            <e-column field="OrderDate" format="{0:MM/dd/yyyy}" header-text="Freight" text-align="Right"></e-column>

            <e-column field="ShipCity" header-text="Ship City"></e-column>




    public class HomeController : Controller


        public IActionResult Index(){

            ViewBag.datasource = OrderRepository.GetAllRecords();

            return View();







    <ej:Grid ID="Grid" runat="server" AllowPaging="True">

        <ToolbarSettings ShowToolbar="true">


                <ej:CustomToolbarItem TemplateID="#Refresh" />




            <ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" />

            <ej:Column Field="CustomerID" HeaderText="Customer ID" />

            <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" />

            <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Format="{0:C}" Priority="3" />

            <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Format="{0:MM/dd/yyyy}" />

            <ej:Column Field="ShipName" HeaderText="Ship Name" />


        <ClientSideEvents DataBound="dataBound" />



namespace sqlbinding


    public partial class _Default : Page


        public static List<Orders> order = new List<Orders>();

        protected void Page_Load(object sender, EventArgs e)


            this.Grid.DataSource = order;







    <ej-grid id="Grid" #grid [datasource]="gridData" [toolbarsettings]="toolbarSettings" [allowpaging]=true >


            <e-column field="OrderID" headertext="Order ID" textalign="right"></e-column>

            <e-column field="CustomerID" headertext='Customer ID' ></e-column>

            <e-column field="EmployeeID" headertext='Employee ID' textalign="right"></e-column>

            <e-column field="Freight" headertext='Freight' textalign="right" format="{0:C}"></e-column>

            <e-column field="OrderDate" headertext='Order Date' textalign="right" format="{0:MM/dd/yyyy}"></e-column>

            <e-column field="ShipName" headertext='Ship Name'></e-column>




import {Component, ViewEncapsulation, ViewChild } from '@angular/core';


        selector: 'ej-app',

        templateUrl: 'app/app.component.html'//give the path file for Grid control html file.


    export class AppComponent {

        public gridData;



            this.gridData = (window as any).gridData;

            this.toolbarSettings = { showToolbar:true, customToolbarItems:[{ templateID: "#Refresh" }] };



            $("#menu1").ejMenu({ menuType: "normalmenu", height: "23px", openOnClick: true, click: "onClick" });

            $("#menu2").ejMenu({ menuType: "contextmenu", contextMenuTarget: "#menu1" });





Define the dataBound event and template element. A click event will be bound to the ejMenu control which will handle the popup open.


    <script id="Refresh" type="text/x-jsrender">

        <ul id="menu1" style="height: 23px;">

            <li style="width: 60px;">

                <a style="width: 25px;z-index: 10010;">Add</a>

                <span class="e-icon e-arrowhead-down" style="line-height: 23px;left:23px; top: -23px;"></span>



        <ul id="menu2">











    <script type="text/javascript">

        function dataBound(args) {

            $("#menu1").ejMenu({ menuType: "normalmenu", height: "23px", openOnClick: true, click: "onClick" });

            $("#menu2").ejMenu({ menuType: "contextmenu", contextMenuTarget: "#menu1" });


        function onClick(e) {

            var t = $("#Grid_toolbarItems").data("ejToolbar");

            var item = $(t.element).find("#Grid_Refresh")[0];

            var pos = $(item).offset();

            var ele = $(item).height();

            var menuobj = $("#menu2").data("ejMenu");

            menuobj.showContextMenu(pos.left, pos.top + ele, $("#menu1"), e);




Figure: Grid toolbar with ejMenu control.

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