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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show menu control in Grid 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.

 

JavaScript

 

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

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

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

                ]

            });

        });

 

CSHTML

 

@(Html.EJ().Grid<EditableOrder>("Grid")

    .Datasource((IEnumerable<object>)ViewBag.dataSource)

    .AllowPaging()

        .ToolbarSettings(tools => {

            tools.ShowToolbar();

            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("Freight").HeaderText("Freight").Format("{0:C2}").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-items>

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

            </e-custom-toolbar-items>

        </e-toolbar-settings>

        <e-columns>

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

        </e-columns>

    </ej-grid>

 

    public class HomeController : Controller

    {

        public IActionResult Index(){

            ViewBag.datasource = OrderRepository.GetAllRecords();

            return View();

        }

    }

 

 

ASPX

 

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

        <ToolbarSettings ShowToolbar="true">

            <CustomToolbarItem>

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

            </CustomToolbarItem>

        </ToolbarSettings>

        <Columns>

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

        </Columns>

        <ClientSideEvents DataBound="dataBound" />

    </ej:Grid>

 

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;

        }

    }

}

 

Angular2

 

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

        <e-columns>

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

        </e-columns>

    </ej-grid>

 

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

    @Component({

        selector: 'ej-app',

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

    })

    export class AppComponent {

        public gridData;

        constructor()

        {

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

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

        }

        dataBound(e:any){

            $("#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>

            </li>

        </ul>

        <ul id="menu2">

            <li>

                <a>Task</a>

                <ul>

                    <li><a>Task1</a></li>

                    <li><a>Task2</a></li>

                </ul>

            </li>

            <li><a>Issue</a></li>

        </ul>

    </script>

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

        }

    </script>

 

Figure: Grid toolbar with ejMenu control.

Article ID: Published Date: Last Revised Date: Platform: Control:
8306 01/12/2018 01/12/2018 JavaScript ejGrid
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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