Enable disable grid and its actions in ASP.NET Core Grid component

9 Jan 20254 minutes to read

You can enable or disable the Syncfusion^® ASP.NET Core Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature.

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 CSS class to the Grid in the click event handler of Button.

    <script>
        document.getElementById('element').onclick = function () {
            var grid = document.getElementById("grid").ej2_instances[0];
            if (grid.element.classList.contains('disablegrid')) {
                grid.element.classList.remove('disablegrid');
                document.getElementById("gridParent").classList.remove('wrapper');
            }
            else {
                grid.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.

CSHTML

<div style="padding-bottom: 20px">
  <ejs-button id="element" content="Enable/Disable Grid" cssClass="e-small"></ejs-button>
</div>
<div id="gridParent">
    <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="315px" 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 Name" 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 grid = document.getElementById("grid").ej2_instances[0];
        if (grid.element.classList.contains('disablegrid')) {
            grid.element.classList.remove('disablegrid');
            document.getElementById("gridParent").classList.remove('wrapper');
        } else {
            grid.element.classList.add('disablegrid');
            document.getElementById("gridParent").classList.add('wrapper');
        }
    }
</script>

disablegrid.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}