Articles in this section
Category / Section

How to disable or enable ToolBar items in the Grid?

1 min read

You can disable or enable the ToolBar items by using the disableItem or enableItem method of the ejToolbar, respectively. You can use these public methods to the toggle state of the Grids ToolBar items.

The following code explains how to disable the toolbar items dynamically. Initially, you can render the checkbox in a checked state, and call the change function as follows.


 <input type="checkbox" checked onchange="change('add')" /><label>Add</label>
 <input type="checkbox" checked onchange="change('edit')" /><label>Edit</label>
 <input type="checkbox" checked onchange="change('delete')" /><label>Delete</label>
<div id="Grid"></div>


$(function () {
    // The DataSource "window.gridData" is referred from the ''.
        dataSource: window.gridData,
        toolbarSettings: {
            showToolbar: true,
            toolbarItems: ["add", "edit", "delete", "update", "cancel"]
        editSettings:{ allowEditing: true, allowAdding: true, allowDeleting: true},
        allowPaging: true,
        columns: [
            { field: "OrderID", isPrimaryKey: true },
            { field: "CustomerID" },
            { field: "EmployeeID" },
            { field: "ShipCity" },
            { field: "ShipCountry" }



<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True"></EditSettings>
            <ej:Column Field="OrderID" IsPrimaryKey="True" />
            <ej:Column Field="CustomerID" />
            <ej:Column Field="EmployeeID" />
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipCountry" />



public partial class _Default : Page
        protected void Page_Load(object sender, EventArgs e)
            this.Grid.DataSource = OrderRepository.GetAllRecords().ToList();



        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
        .ToolbarSettings(toolbar =>
            toolbar.ShowToolbar().ToolbarItems(items =>
        .Columns(col =>
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Add();
            col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
            col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();



public partial class GridController : Controller
        public ActionResult Index()
            var DataSource = new NorthwindDataContext().OrdersViews.Take(200).ToList();
            ViewBag.datasource = DataSource;
            return View();


Once this function is called, it disables or enables the ToolBar items based on their status.

function change(e) {
   //Gets the ToolBar.
   var $toolbar = $("#Grid_toolbarItems");
   //Gets the tool to the toggle enable.
   var li = $("#Grid_" + e);
   //Checks the current status.
   var toggle = li.hasClass("e-disable") ? "enable" : "disable";
  // Enables or disables the call based on the status.
   $toolbar.ejToolbar(toggle + "Item", li);


You can see the Add and Edit ToolBar items disabled after unchecking the respective checkboxes.


Figure 1: Disabled ToolBar Items in the Grid


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment