Category / Section
how to disable entire grid?
1 min read
This documentation explained how to disable entire grid and its action by using check box click event.
Solution:
The grid actions are disabled by setting the check box value to the grid members through the setModel property and grid is disabled by adding the e-disable class with the grid class.
HTML
<input type="checkbox" id='checkme'> <div id="Grid"></div>
JS
1. Render the Grid control.
$(function () {
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#Grid").ejGrid({
dataSource: data,
allowScrolling: true,
allowSorting: true,
allowPaging: true,
allowFiltering: true,
scrollSettings: { width: 1000, height: 300 },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", headerText: "Order ID", isprimaryKey: true, width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75 },
{ field: "Freight", headerText: "Freight", editType: "numericedit", width: 75, format: "{0:C}" },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}" },
{ field: "ShipCity", headerText: "Ship City", width: 110 }
]
});
});
Razor
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowScrolling()
.AllowSorting()
.AllowFiltering()
.AllowPaging()
.ScrollSettings(scroll => { scroll.Width(1000).Height(300); })
.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);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
col.Field("Freight").HeaderText("Freight").EditType(EditingType.Numeric).Width(75).Format("{0:C3}").Add();
col.Field("OrderDate").HeaderText("Order Date").Width(80).Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
)
Aspx
<ej:Grid ID="Grid" runat="server" AllowPaging="true" AllowScrolling="true" AllowSorting="true" AllowFiltering="true">
<ScrollSettings Width="1000" Height="300"></ScrollSettings>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" />
<ej:Column Field="Freight" HeaderText="Freight" EditType="Numeric" Width="75" Format="{0:C3}" />
<ej:Column Field="OrderDate" HeaderText="OrderDate" Width="80" Format="{0:MM/dd/yyyy}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="110"></ej:Column>
</Columns>
</ej:Grid>
Core
<ej-grid id="Grid" datasource="ViewBag.dataSource" allow-paging="true" allow-scrolling="true" allow-sorting="true" , allow-filtering="true">
<e-scroll-settings width="1000" height="300" />
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="75"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="75"></e-column>
<e-column field="Freight" header-text="Freight" width="75" format="{0:C3}"></e-column>
<e-column field="OrderDate" header-text="Order Date" width="80" format="{0:MM/dd/yyyy}"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="110"></e-column>
</e-columns>
</ej-grid>
Click event
2. Disable the grid by using check box value within the check box click event.
$("#checkme").click(function (e) {
var check = $(this).is(":checked") // checkbox value
var obj = $("#Grid").ejGrid("instance"); // Grid instance
obj.element[check ? "addClass" : "removeClass"]("e-disable"); // disable the Grid
$(obj.getPager()).ejPager({ enabled: !check }); // disable and enable the grid pager
obj.option({ editSettings: { allowEditing: !check, allowAdding: !check, allowDeleting: !check }, enableRowHover: !check }) // set the check box value to Grid members
if (check == true) {
obj.getScrollObject().disable(); // disable the grid scroller
$(".e-headercell").removeAttr("title"); // disable the header tooltip
$(".e-ejinputtext").removeAttr("title"); // disable filterbar tooltip
obj._off(obj.element, obj.model.enableTouch == true ? "tap" : "click", obj._mouseClickHandler); // disable the grid click event
obj._off(obj.element, obj.model.enableTouch == true ? "tap" : "click", obj._clickHandler); // disable the grid click event
$("#Grid").find(".e-filterbarcell").find(".e-ejinputtext").attr("disabled", "disabled"); // disable the normal filterbar
}
else {
obj.getScrollObject().enable(); // enable the grid scroller
obj._on(obj.element, obj.model.enableTouch == true ? "tap" : "click", obj._mouseClickHandler); // enable the grid click event
obj._on(obj.element, obj.model.enableTouch == true ? "tap" : "click", obj._clickHandler); // enable the grid click event
}
});
Before disable the Grid
After disable the Grid
