Category / Section
How to disable or enable ToolBar items in the Grid?
6 mins 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 Grid’s 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.
<div>
<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>
<div id="Grid"></div>
$(function () {
// The DataSource "window.gridData" is referred from the 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'.
$("#Grid").ejGrid({
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" }
]
});
});
ASPX
<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> <Columns> <ej:Column Field="OrderID" IsPrimaryKey="True" /> <ej:Column Field="CustomerID" /> <ej:Column Field="EmployeeID" /> <ej:Column Field="ShipCity" /> <ej:Column Field="ShipCountry" /> </Columns> </ej:Grid>
CodeBehind
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = OrderRepository.GetAllRecords().ToList();
}
}
MVC
@(Html.EJ().Grid<Object>("Grid")
.Datasource(ViewBag.dataSource)
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.AllowPaging()
.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();
})
)
CTRL
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
