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