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();
}