How to show menu control in JavaScript Grid Toolbar?

3 mins read

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

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

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

</CustomToolbarItem>

</ToolbarSettings>

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

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

</li>

</ul>

<li>

<ul>

</ul>

</li>

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

</ul>

</script>

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.

Conclusion

I hope you enjoyed learning about how to show menu control in Grid Toolbar.

You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to show menu control in JavaScript Grid Toolbar?

Access denied