Enable/Disable Grid and its actions
17 Feb 20224 minutes to read
You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles.
To enable/disable the grid and its actions, follow the given steps:
Step 1:
Create CSS class with custom style to override the default style of Grid.
.disablegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}
Step 2:
Add/Remove the custom CSS class to the Grid in the click event handler of Button.
<script>
document.getElementById('element').onclick = function () {
var gridInst = document.getElementById("Grid").ej2_instances[0];
if (gridInst.element.classList.contains('disablegrid')) {
gridInst.element.classList.remove('disablegrid');
document.getElementById("GridParent").classList.remove('wrapper');
}
else {
gridInst.element.classList.add('disablegrid');
document.getElementById("GridParent").classList.add('wrapper');
}
}
</script>
In the below demo, the button click will enable/disable the Grid and its actions.
<ejs-button id="element" content="Enable/Disable Grid" cssClass="e-small"></ejs-button>
<div id="GridParent">
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true" toolbar='@new List<string> {"Add","Edit","Delete","Cancel" }'>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<style>
.disablegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}
</style>
<script>
document.getElementById('element').onclick = function () {
var gridInst = document.getElementById("Grid").ej2_instances[0];
if (gridInst.element.classList.contains('disablegrid')) {
gridInst.element.classList.remove('disablegrid');
document.getElementById("GridParent").classList.remove('wrapper');
} else {
gridInst.element.classList.add('disablegrid');
document.getElementById("GridParent").classList.add('wrapper');
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}